Question

我一直在尝试根据用户从下拉菜单中选择的内容找到更改清单上可用选项的方法，但我似乎无法让它工作。

我尝试过使用这个tutorial等等，但是不能让它做我想做的事。

我有类别，属于考试委员会。我希望用户能够从下拉菜单中选择一个考试板，然后更改他们看到的可用类别（我希望他们只看到属于该考试板的类别）。

目前表格中的代码是（HAML）：

= form_for @test do |f|

      .form-object
        .col-sm-12
          = f.collection_select :exam_board_id, ExamBoard.all, :id, :name, { prompt: "Exam Board" }, :class => 'form-control'

      .form-object
        .col-sm-12.category_to_fix
          =# hidden_field_tag "test[category_ids][]", nil
          - Category.real.each do |category|
            -if category.year == "AS"
              .category-label
                = label_tag dom_id(category), category.name
                = check_box_tag "test[category_ids][]", category.id, @test.category_ids.include?(category.id), id: dom_id(category)

      .form-object
        = f.submit :class => 'normal button'

但这只是显示所有类别，而不是与所选考试委员会相关的类别。

有没有办法可以通过复选框执行此操作？

Answer 1

这是教程中的Javascript调整后删除然后重新生成复选框。我知道这不会与您的模型和视图完全匹配，但如果没有详细的结构细节，我无法确切地告诉您如何做到这一点！

首先，复选框（以及其他任何内容）需要包含在<div>中，我已经id cities_checkboxes

<!-- app/views/cities/_city.html.erb -->
<%= f.check_box_tag :city_id, city.id %><%= city.name.titleize %>

另外

# app/assets/javascripts/welcome.js.coffee

$ ->
  $(document).on 'change', '#countries_select', (evt) ->
    $.ajax 'update_cities',
      type: 'GET'
      dataType: 'script'
      data: {
        country_id: $("#countries_select option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic country select OK!")

和

# app/views/welcome/update_cities.js.coffee

$("#cities_checkboxes").empty()
  .append("<%= escape_javascript(render(:partial => @cities)) %>")

这样，更新国家/地区选择框将从数据库中加载城市列表，清空新创建的div，其中只包含复选框，然后添加每个复选框（_city.html.erb部分）进入那个div。

根据所选的下拉选项更改可用复选框

1 个答案: