使用上一个下拉列表的结果填充下拉列表 [英] Populate a drop down using result from a previous drop down

问题描述

我有一个包含Schools和Majors的Rails数据库。一旦用户选择了他的学校，我想填写专业的下拉，只有相应学校的专业。目前我有两个工作下降，但你可以看到他们只选择所有值。我是否需要Json / Ajax / JavaScript，如果是这样，我该如何实现呢？

I have a Rails database with Schools and Majors in it. Once the user selects his school, I want to fill up the major's drop down with only the majors from the corresponding school. Currently I have two working drop downs, but as you can see they just select all values. Will I need Json/Ajax/JavaScript for this, and if so how can I go about implementing it?

<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>

推荐答案

编辑

当前解决方案是在每个下拉列表选择上使用异步请求。假设你有一个小的总选择语料库（假设< 5k），在页面加载时只有1个异步操作可能会更好，然后在用户做出选择时使用JS填充下拉列表。这样可以节省大量网络电话，并提供更好的用户体验。

Edit

The current solution is using an async request on each dropdown selection. Assuming you have a small total corpus of choices (let's say <5k), it may be better to only have 1 async operation when the page loads, and then use JS to populate the dropdowns as the user makes their choices. This would save a lot of network calls, and provide a better user experience.

好吧，所以经过多次搜索，我得到了一个正在运行的AJAX请求（我将在这里发布以供后人使用）。

Alright, so after much searching I've arrived at a working AJAX request (which I will post here for posterity).

在我的数据库中创建新课程时，有一个学校和必须为非null的主要外键。以下是下拉菜单

When creating a new course in my database there is a Schools and a Major foreign key that must be non-null. Here are the dropdowns

<!-- 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请求

Now that the HTML is up, we need some JavaScript (and jQuery) to process the AJAX request

//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)
        );
    }
};

记下'request'变量。这表明控制器&将处理请求的操作。现在我们必须成功。我的Major控制器已经存在，所以我们只需要添加动作。首先添加操作的路由以使Rails服务器知道该操作。

Take note of the 'request' variable. This indicates the controller & action that will process the request. Now we must make it. My Major controller already existed, so we only have to add the action. First add the action's route to make the Rails server aware of the action.

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

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

Now create the action in the Major controller

#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

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

Finally, we have to create the query to extract this information in our model.

#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

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

I think that's everything. There are certainly other ways of implementing this, but this one worked for me. Good luck!

这篇关于使用上一个下拉列表的结果填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！