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

我一直在试图找到一种方法来根据用户从下拉菜单中选择的内容来更改清单上的可用选项，但似乎无法使其工作。根据所选下拉选项更改可用复选框

我尝试过使用这个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'

但这仅仅是显示所有的类别，不涉及到所选择的考试板的人。

有没有办法可以用复选框做到这一点？

来源

2015-04-04 camillavk

只是为了澄清，你说你已经按照教程，你完成了'AJAX魔术'下的步骤？这是Javascript显示和隐藏复选框 – 2015-04-04 13:15:37

我做到了，但无法让它工作 - >我认为这可能与我试图填充复选框列表的事实有关，而不是下拉菜单 – camillavk 2015-04-04 13:16:57

你需要一些JavaScript来使复选框出现/消失而不重新加载页面，没有别的办法。 tutoiral中的代码只是删除了''然后添加新的''s。 – 2015-04-04 13:20:32

下面是从教程中调整的Javascript，然后重新生成复选框。我知道这并不完全符合你的模型和观点，但没有详细的结构细节，我不能告诉你如何做到这一点！

首先，复选框（没有别的），需要在<div>被包裹起来，我已经给出了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!")

而且

的 id

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

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

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

来源

2015-04-04 14:10:18

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

回答

相关问题