Rails 选择选项根据另一个选择动态变化（没有 ajax）答案

【问题标题】：Rails select options dynamically changing based on another select (without ajax)Rails 选择选项根据另一个选择动态变化（没有 ajax）
【发布时间】：2020-07-23 22:28:43
【问题描述】：

我有一个用户选择学校的表格，然后是学校提供的资格：

  <div class="row">
    <div class="col-md-6">
      <%= f.association :education_organization,
                        collection: EducationOrganization.active,
                        include_blank: true
                        %>
    </div>
    <div class="col-md-6">
      <%= f.association :training_qualification,
                        collection: TrainingQualification.active,
                        include_blank: true
                        %>
    </div>
  </div>

我想动态限定选择的资格，以仅显示所选学校可用的资格。

我不想进行 ajax 调用，我宁愿在开始时发送整个列表并让客户端离线切换选择选项。

最好的方法是什么？

【问题讨论】：

也许不是最好的选择，但我会生成一个大的 JSON 来匹配学校和资格。然后添加一个简单的事件监听器，它会监听学校名称并相应地填充资格。
我只会使用jQuery根据其他选择的变化来显示/隐藏你想要的元素
我认为 Rockwell 的答案可能比我的更好，因为它会保留之前选择的资格，以防用户在学校选择上来回走动。

标签： ruby-on-rails forms ruby-on-rails-5

【解决方案1】：

我找到了一种方法，首先加载所有选项，然后存储 html 选项并通过关联 ID 过滤该列表作为数据属性。

查看：

      <%= f.association :education_organization,
                        collection: EducationOrganization.active,
                        include_blank: true
                        %>

      <%= f.association :training_qualification,
                        collection: TrainingQualification.active.map { |tq| [tq.name, tq.id, {data: {org: tq.education_organization.id}}] },
                        include_blank: true
                        %>

JS：

$(function(){
  // this is a hack that lets the JS be included anywhere, but only run on pages with the relevant form
  var qualifications_select = $('#user_training_qualification_id');
  if(qualifications_select) { 

    // this stores all select options
    var qualification_options = qualifications_select.html();


    function updateQualSelect(qualifications_select) {
      var selected_org_id = $('#user_education_organization_id :selected').val();
      if(selected_org_id != '') {
        var filtered_options = $(qualification_options).filter(`[data-org=${selected_org_id}]`);
        qualifications_select.html(filtered_options);
      } else {
        qualifications_select.empty();
      }
    }

    // this line filters the select when the other select changes
    $('#user_education_organization_id').change(function() {
      updateQualSelect(qualifications_select);
    });

    // this line filters the select on page load
    updateQualSelect(qualifications_select); 
  }
})

【讨论】：