使用 jquery-select2 的依赖下拉内容

Posted

技术标签:

【中文标题】使用 jquery-select2 的依赖下拉内容【英文标题】:Dependent Dropdown Contents with jquery-select2 【发布时间】:2016-02-10 13:59:56 【问题描述】:

我有一个 Rails 4 应用程序,我在其中使用 Jquery-select2 作为我的下拉列表。我有两个下拉列表,我希望第一个中的选择决定用户可以在第二个中选择的内容。有点像选择一个国家并获得该国家的州列表。

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

在我开始使用 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>

这是我发现并修改并在 Select2 之前工作的一些 CoffeeScript:

jQuery ->
  responses = $('#query_response_id').html()
  $('#query_demographic_id').change ->
    demographic = $('#query_demographic_id :selected').text()
    escaped_demographic = demographic.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(responses).filter("optgroup[label='#escaped_demographic']").html()
    if options
      $('#query_response_id').html(options)
      $('#query_response_id').parent().show()
    else
      $('#query_response_id').empty()
      $('#query_response_id').parent().hide()

我在 Select2 之前为响应模型下拉菜单使用的代码行是:

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

当我看到它时,我似乎需要以某种方式将:responses, :demographic_name, 移动到这一行:

<%= select_tag "responses", options_from_collection_for_select(@response, "id", "name"), id: "response" %>

但是,我尝试过的一切都失败了。我查看了 this 和 this 和 this,但它们都与 Rails 无关,所以我被卡住了。

有什么想法吗?

非常感谢所有帮助。

【问题讨论】:

我不是 Rails 人,但有很多事情需要检查,1.人口统计 = $('#query_demographic_id :selected').text() ---> 这应该是$('#query_demographic_id option:selected').text(), 2. optgroup[label='#escaped_demographic']") -- 在这里,您使用 ID = #escaped_demographic 的标签定位元素,因为 ID在 DOM 中是独一无二的,你可以简单地做: $("'#escaped_demographic']").html() 我做了这些更改,但是,它们并没有解决问题。 我回答之前的快速问题:人口统计和响应下拉菜单中大约有多少选项?在我看来,您可以根据所选的 Demographic 在 Ajax 上加载响应下拉列表。如果总共有超过 50 个响应,我会使用这种方法。但如果数量较少,我会使用 jQuery 过滤第二个下拉菜单。我可以用任何一种方法帮助你。告诉我 可能有大约 300 个人口统计项目和数千个响应。 Possible duplicate。如果这没有帮助,我也许可以稍后再写一个针对具体情况的答案。 【参考方案1】:

从最简单的情况开始:首先,让表单在没有 Select2 或 Chosen 的情况下正常工作。只需使用基本的选择下拉菜单,您就可以看到发生了什么。

根据您的情况,您可以加载所有 Demographics,并为 Responses 创建一个空选择:

<%= 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 %>
然后,当所选的人口可归更改时,您可以通过AJAX更新响应的选项:
$(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>" );
      );

    );
  );

);

最后,您只需要在 ResponsesController 上执行一个索引操作,即可为您提供选择框的 json。您需要以下格式的 JSON。

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

现在,当您的 Demographic 在第一个选择中发生变化时,您应该会在第二个选择中获得过滤后的响应列表。如果这有效,您现在可以添加您选择的 JQuery 插件。就个人而言,我更喜欢 Chosen 而不是 Select2。

要选择在上述情况下工作,您只需稍微修改 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");
    );
  );

);

【讨论】:

我不是 100% 致力于 Select2。让我试着通过 Chosen 把它放进去。 我已完成所有这些更改,并在&lt;%= select_tag "demographics", options_from_collection_for_select(@demographics, "id", "demographic_name"), id: "demographics", class: "chosen" %&gt; 上收到“nil:NilClass 的未定义方法 'map'”消息 好的,我得到了表格显示。我必须做一个小调整,将“@demographics”更改为“@demographic”,然后渲染。但是,它没有选择 CSS 进行格式化,并且选择人口统计不会填充响应下拉列表。我在资产管道目录中有适当的 css 和 js 文件,并重新编译了我的资产。我还尝试明确说明所选文件包含在 application.js 和 application.css 中。 将 javascript 移动到模板的头部,现在 CSS 正在呈现。仍然没有运气填充响应下拉列表。 如果您访问 localhost:3000/responses.json,您的 JSON 渲染是否正确?此外,当您更改人口统计时,AJAX 调用是否有效?查看 Rails 服务器输出,看看 GET 是否正常工作...【参考方案2】:

我不知道轨道, 但我使用了 Javasctipt/Jquery,Bootstrap。

这能解决你的问题吗?

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

演示:http://jsfiddle.net/4ad7A/316/

    <script>
   $("#country, #state").select2();populateCountries("country", "state");
   </script>

【讨论】:

以上是关于使用 jquery-select2 的依赖下拉内容的主要内容,如果未能解决你的问题,请参考以下文章

jQuery ajax 获取信息展示在“下拉列表”中

如何让 jquery-select2 正确显示 html 实体?

jquery-select2 总是在控制器中发送空参数

使用 Spree 和 jQuery-Select2 为分组列表项和平面列表项设置样式

以编程方式添加新的 jquery-select2-4 选项并重置搜索字段?

清除多选 jquery-select2