Rails的选择选项基于另一个选择而动态变化(没有ajax)

Question

我有一个表单，用户可以在其中选择一所学校，然后选择学校提供的资格：

  <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调用，我宁愿在开始时发送整个列表，并让客户端离线切换选择选项。

最好的方法是什么？

Answer 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); 
  }
})