使用jquery-select2的相关下拉列表内容

我有一个Rails 4应用程序，我使用Jquery-select2作为下拉列表。我有两个下拉列表，我希望在第一个下拉列表中的选择决定用户可以在第二个下拉列表中选择什么。有点像选择一个国家，然后给该国家一个州列表

在我的应用程序中，我有人口统计和反应模型。当有人选择一个人口统计时，我想用该人口统计的适当项目填充响应列表

在我开始使用Select2之前，我已经让它工作了。但是，我忽略了如何使用Select2的一些细微差别。我对Rails很满意，但Javascript和Jquery是我的弱点

这是我的表格：

<form>
      <%= f.label :demographic %><br>
      <%= select_tag "demographics", options_from_collection_for_select(@demographic, "id", "demographic_name"), id: "simple-example" %></br></br>
      <%= f.label :operator %><br>
      <%= select_tag "operators", options_from_collection_for_select(@operator, "id", "name"), id: "operator" %></br></br>
      <%= f.label :response %><br>
      <%= select_tag "responses", options_from_collection_for_select(@response, "id", "name"), id: "response" %></br></br>
      <%= f.label :operator_selection %><br>
      <%= select_tag "operator_selections", options_from_collection_for_select(@operator_selection, "id", "name"), id: "operator_selection" %></br></br>
    </form>

在为响应模型下拉列表选择2之前，我使用的代码行是：

<%= f.grouped_collection_select :response_id, Demographic.order(:demographic_name), :responses, :demographic_name, :id, :name, include_blank: :true %>

但是，我尝试过的一切都失败了。我已经看了和，但是没有一个和Rails相关，所以我被卡住了

有什么想法吗

非常感谢您的帮助。

我不懂rails， 但是我使用了Javasctipt/Jquery，Bootstrap

这能解决你的问题吗

我从Javascript数组绑定国家和州值

演示：

---

从最简单的情况开始：首先，在不选择Select2或selected或其他任何选项的情况下让表单工作。只需使用基本的选择下拉列表，就可以看到发生了什么

在您的情况下，您可以加载所有人口统计信息，并为响应创建一个空选择：

<%= form_tag("/test") do |f| %>
  <%= select_tag "demographic", options_from_collection_for_select(@demographic, "id", "name"), id: "demographic", class: "chosen" %><br>
  <%= select_tag "responses", "", id: "responses", class: "chosen" %>
<% end %>

此操作将为您提供类似的功能：

class ResponsesController < ApplicationController

  def index
    @responses = Response.order(:name)
    @responses = @responses.where(demographic_id: params[:demographic_id]) if params[:demographic_id].present?

    # You don't need this respond to block if you have a jbuilder view set up at app/views/responses/index.json.jbuilder
    respond_to do |format|
      format.json { render json: @responses }
    end
  end

end

现在，当您的人口统计在第一次选择中发生变化时，您应该在第二次选择中获得一个过滤后的响应列表。如果这是可行的，您现在可以添加您选择的JQuery插件。就我个人而言，我更喜欢选择2

要在上述情况下工作，只需稍微修改Javascript：

$(document).ready(function() {

  // Attach the chosen behaviour to all selects with a class of "chosen"
  $('.chosen').chosen();

  $('#demographic').change(function(){
    var selected_demographic = $(this).val();

    // Query the responses for this demographic:
    $.get( "/responses.json", { demographic_id: selected_demographic }, function( data ) {

      // Remove the existing options in the responses drop down:
      $("#responses").html("");

      // Loop over the new response json and populate the select list:
      $.each( data, function( index, value ) {
        $("#responses").append( "<option value='" + value.id + "'>" + value.name + "</option>" );
      });

      // Now reset chosen, with the new options:
      $("#responses").trigger("chosen:updated");
    });
  });

});

---

我不是rails的人，但是有很多事情你需要检查，1。人口统计=$'query\u demographic\u id:selected'。文本-->这应该是$'query\u demographic\u id选项：selected'。文本，2。optgroup[label='{Escape_demographic}']-这里您将使用ID={Escape_demographic}的label来定位元素，因为ID在DOM中是唯一的，您只需执行：$'{Escape_demographic}'].htmlI做了这些更改，但是，他们没有解决这个问题。在我回答之前先问一个问题：在人口统计和响应下拉列表中，大致有多少个选项？在我看来，您可以根据所选的统计数据通过Ajax加载响应下拉列表。如果总共有超过50个响应，我会使用这种方法。但是如果数量较少，我会使用jQuery过滤第二个下拉列表。这两种方法我都可以帮你。让我知道大概300个人口统计项目和可能的数千个回答。。如果这没有帮助，我也许可以在以后写一个具体情况的答案。我并不是100%承诺选择2。让我试着通过Selected将其放入。我已经做了所有这些更改，并且得到了nil:NilClass消息的“undefined method”map。好的，我得到了显示的表单。我不得不对@demographics改为@demographics做了一个小小的调整，结果显示。但是，它不会选择CSS进行格式化，并且选择一个人口统计不会填充“响应”下拉列表。我在资产管道目录中有相应的css和js文件，并且已经重新编译了我的资产。我还尝试显式地声明所选文件将包含在application.js和application.css中。将javascript移动到模板的头部，css现在正在呈现。仍然无法填充响应下拉列表。如果转到localhost:3000/responses.JSON，JSON呈现是否正确？另外，当您改变人口统计时，AJAX调用是否有效？查看rails服务器输出，看看GET是否正常工作。。。

<%= form_tag("/test") do |f| %>
  <%= select_tag "demographic", options_from_collection_for_select(@demographic, "id", "name"), id: "demographic", class: "chosen" %><br>
  <%= select_tag "responses", "", id: "responses", class: "chosen" %>
<% end %>

$(document).ready(function() {

  // Listen for the demographic changing
  $('#demographic').change(function(){

    // Grab the id of currenly selected demographic
    var demographic_id = $(this).val();

    // Query the responses for this demographic:
    $.get( "/responses.json", { demographic_id: demographic_id }, function( data ) {

      // Remove the existing options in the responses drop down:
      $("#responses").html("");

      // Loop over the json and populate the Responses options:
      $.each( data, function( index, value ) {
        $("#responses").append( "<option value='" + value.id + "'>" + value.name + "</option>" );
      });

    });
  });

});

[{"id":2,"name":"Direct Request - Telecommunication"},{"id":3,"name":"Direct Request - Internet/Electronic"},{"id":4,"name":"Company Request - Written"}]

class ResponsesController < ApplicationController

  def index
    @responses = Response.order(:name)
    @responses = @responses.where(demographic_id: params[:demographic_id]) if params[:demographic_id].present?

    # You don't need this respond to block if you have a jbuilder view set up at app/views/responses/index.json.jbuilder
    respond_to do |format|
      format.json { render json: @responses }
    end
  end

end

$(document).ready(function() {

  // Attach the chosen behaviour to all selects with a class of "chosen"
  $('.chosen').chosen();

  $('#demographic').change(function(){
    var selected_demographic = $(this).val();

    // Query the responses for this demographic:
    $.get( "/responses.json", { demographic_id: selected_demographic }, function( data ) {

      // Remove the existing options in the responses drop down:
      $("#responses").html("");

      // Loop over the new response json and populate the select list:
      $.each( data, function( index, value ) {
        $("#responses").append( "<option value='" + value.id + "'>" + value.name + "</option>" );
      });

      // Now reset chosen, with the new options:
      $("#responses").trigger("chosen:updated");
    });
  });

});