时间戳

首页 > 解决方案 > 由相关选择动态填充的选择列表上的预选项目

jquery - 由相关选择动态填充的选择列表上的预选项目

问题描述

这是使用 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 函数不是空白的，但这并没有使用该类别中的所有选项预先填充列表.

标签： jquerycoldfusion

解决方案

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

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

推荐阅读