使用上一个下拉列表的结果填充下拉列表[重复]

Question

我有一个包含学校和专业的 Rails 数据库。一旦用户选择了他的学校，我想只用相应学校的专业填写专业的下拉菜单。目前我有两个工作下拉菜单，但正如您所见，它们只选择所有值。我需要 Json/Ajax/JavaScript 吗？如果需要，我该如何实现它？

<div class="field">
  <%= f.label :school_id %><br>
  <%= f.collection_select :school_id, School.order(:name),:id,:name, include_blank: false %>
</div>
<div class="field">
  <%= f.label :major_id %><br>
  <%= f.collection_select :major_id, Major.order(:name),:id,:name, include_blank: false %>
</div>

Answer 1

编辑

当前的解决方案是对每个下拉选择使用异步请求。假设您有一个小的总选择语料库（假设

原创

好的，经过大量搜索，我找到了一个有效的 AJAX 请求（我将在此处发布以供后代使用）。

在我的数据库中创建新课程时，有一个 Schools 和一个 Major 外键必须为非空。这是下拉菜单

<!-- app/views/courses/_form.html.erb -->
<div class="field">
  <%= f.label :school_id %><br>
  <%= f.collection_select :school_id, School.order(:name),:id,:name, {include_blank: false},{:id=>'school_id_select'} %>
</div>
<div class="field">
  <%= f.label :major_id %><br>
  <%= f.collection_select :major_id, [],:id,:name, {include_blank: false},{:id=>'major_id_select'} %>
</div>

现在 HTML 已经创建好了，我们需要一些 JavaScript（和 jQuery）来处理 AJAX 请求

//app/assests/javascripts/courses.js (note this was generated as a .coffee file, which I changed to .js as I don't know CoffeeScript
console.log('loaded courses.js')//check that the file is loaded

$(document).on('change','#school_id_select', function () {//change majors when user changes school
   load_majors_from_school_dropdown();
});

$(document).ready(load_majors_from_school_dropdown);//populate majors when page loads with first school

function load_majors_from_school_dropdown(){
    var request = "/majors/find_majors_given_school_id?school_id=" //access controller of interest
        + $('#school_id_select').val();

    var aj = $.ajax({
        url: request,
        type: 'get',
        data: $(this).serialize()
    }).done(function (data) {
         change_majors(data);//modify the majors' dropdown
    }).fail(function (data) {
         console.log('AJAX request has FAILED');
    });
};

//modify the majors' dropdown
function change_majors(data) { 
    $("#major_id_select").empty();//remove all previous majors
    for(i = 0;i<data.length;i++){ 
        $("#major_id_select").append(//add in an option for each major
            $("<option></option>").attr("value", data[i].id).text(data[i].name)
        );
    }
};

记下“请求”变量。这表示将处理请求的控制器和操作。现在我们必须做到。我的主要控制器已经存在，所以我们只需要添加动作。首先添加动作的路由，让 Rails 服务器知道动作。

#config/routes.rb
Rails.application.routes.draw do
  #...
  get 'majors/find_majors_given_school_id'
  #...
end

现在在主控制器中创建动作

#app/controllers/majors_controller.rb
#custom action for AJAX/JSON calls. Note this can be done multiple ways
def find_majors_given_school_id
   school_id = params[:school_id]#utilizes the url to extract school_id ".../find_majors_given_school_id?school_id=123123"
   puts "THIS IS MY SCHOOL ID :: #{school_id}"#view this in teminal
    
   majors = Major.search_for_school_id(school_id).as_json#query the model for the data and convert it to a hash using as_json
   puts "THESE ARE MY MAJORS IN A HASH :: #{majors}"
   respond_to do |format|
        format.json { 
            render json: majors
        } 
   end
end

最后，我们必须创建查询以在我们的模型中提取此信息。

#app/models/major.rb
class Major < ActiveRecord::Base
    has_many :courses, dependent: :destroy
    belongs_to :school, :foreign_key => "school_id"

    def self.search_for_school_id(id)
        where("school_id = ?",id)        
    end
    #...
end

我认为这就是一切。当然还有其他方法可以实现这一点，但这个对我有用。祝你好运！