Question

这是使用jquery和ColdFusion。我在页面上有两个选择-常规和专业（常规类别，该类别中的专业）。

<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等）变量是根据为用户存储的内容设置的，并且可以预先选择常规选择。

如果未保存任何内容，则可以正常工作。用户选择一个常规类别，然后将该类别的专业填写在所选的相关内容中。如果存在保存的选择，则可以正确地预先选择常规类别，但是我无法弄清楚如何为该类别以及预选专业本身预先加载专业。 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）预选择已保存的专业。

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

Answer 1

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

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

然后在填充列表后使用它来预选择适当的选项：

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

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

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

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

由相关选择动态填充的选择列表中的预选择项

1 个答案: