select 列表中由相关 select 动态填充的前 select 项目

Question

这是使用 jquery 和 ColdFusion。我在一个页面上有两个 selects - general 和 major（一般类别，该类别中的专业）。

<form>
  <div class="course">
    <div class="row">
      <select name="general[]" class="general">
        <option value="">--- Select a General Interest ---</option>
        <cfoutput query="qryCipMajor">
          <option value="#qryCipMajor.stm_cip_fam#"<cfif qryCipMajor.stm_cip_fam EQ cipFam1> selected="selected"</cfif>>#qryCipMajor.stm_major_new# (#qryCipMajor.stm_cip_fam#)</option><!--- cip_name --->
        </cfoutput>
      </select>
    </div>
    <div class="row">
      <select name="major[]" class="major">
        <option value=""></option>
      </select>
    </div>
  </div>
</form>

页面上有 5 个。 cipFam1（和 cipFam2 等）变量是根据为用户存储的内容设置的，并让一般 select 预先 selected.

如果没有保存任何东西，它工作正常。用户 select 是一个通用类别，该类别的专业填写在相关的 select 版中。如果有一个已保存的 selection，则一般类别已正确预 selected，但我无法弄清楚如何让专业预加载该类别以及专业本身预 selected。 jquery 看起来像这样。

$(".general").change(function() {
  var selected = $(this).val();
  if(selected == "") return;
    var $major = $(this).closest('.course').find('.major').empty().append('<option value="">-- Select a Majors --</option>');

    $.getJSON(apiPath + "/majorsCFC.cfc?method=queryCipMajorRemote&returnformat=json",{"stm_cip_fam":selected}, function(res,code) {
        for (var i = 0; i < res.length; i++) {
              $major.append($('<option/>', {
                value: res[i].ID,
                text: res[i].NAME
              }));
        };
    });
});

我远不是 jQuery 专家，我真的可以在这里使用一些指导来说明如何 1) 如果已保存一般类别则预加载专业列表，然后 2) 预加载select 保存的专业。

我知道 jQuery 使用 'select' 和 '.val' 指定 selected 元素的机制 - 但需要了解如何将其合并到动态填充的列表中.我在想，如果 cipFam1 有一个值，并且使用它来将主要的 id 传递给一个单独的 jquery 函数不是空的，但这并没有预先填充所有的列表该类别中的选项。

Answer 1

使用data-* attribute存储每个列表的保存值

<select name="major[]" class="major" data-preselectedid="1234">

然后用它预先select适当的选项，填充列表后：

$.getJSON( 
    // ... 
    $major.val($major.data("preselectedid"));
});

要预加载 .major 列表，请在加载文档时触发 "change" 事件

$( document ).ready(function() {
   $(".general").change(function(){
     // ...
   });

   $(".general").trigger("change");
});

select 列表中由相关 select 动态填充的前 select 项目

Pre-select item on select list that is dynamically populated by a related select

coldfusion

jquery