Javascript 使用jQuery设置select时，无法获取使用jQuery选择的选定值

我正在尝试创建一些级联下拉列表，我有一个我构建的函数，它有一半工作：

 function CascadeDropDowns(parentClass, childClass, action) {

   var DropDownId = $(parentClass + " option:selected").val();

   $.ajax({
     url: "/Terminals_configuration/" + action,
     data: { DropDownId: DropDownId },
     dataType: "json",
     type: "POST",
     error: function () {
       alert("An error occurred.");
     },
     success: function (data) {
       var items = "";
       $.each(data, function (i, item) {
           items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
       });
         $(childClass).html(items);
         $(childClass)[0].selectedIndex = 0;
     }
   });
  }

    $(document).ready(function(){
      $(".DeviceTypeDDL").change(function () {
        CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups");
        CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
      });
      $(".ConfigGroupDDL").change(function () {
        CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
      });
    });

函数级联下拉列表（父类、子类、操作）{
var DropDownId=$（parentClass+“选项：选中”）.val（）；
$.ajax({
url:“/Terminals\u configuration/”+操作，
数据：{DropDownId:DropDownId}，
数据类型：“json”，
类型：“POST”，
错误：函数（）{
警报（“发生错误”）；
},
成功：功能（数据）{
var项目=”；
$。每个（数据、功能（i、项）{
项目+=“”+项目。文本+“”；
});
$（childClass）.html（项目）；
$（子类）[0]。已选择索引=0；
}
});
}
$（文档）.ready（函数（）{
$（“.DeviceTypeDDL”）.change（函数（）{
级联下拉列表（“.DeviceTypeDDL”、“ConfigGroupDDL”、“GetGroups”）；
级联下拉列表（“.ConfigGroupDDL”、“ConfigNameDDL”、“GetParameters”）；
});
$（“.ConfigGroupDDL”）.change（函数（）{
级联下拉列表（“.ConfigGroupDDL”、“ConfigNameDDL”、“GetParameters”）；
});
});

相关HTML-此处不包括jQuery v1.8.2的链接

<form action="/Terminals_configuration" method="post">    <fieldset>
      <legend>
        <h2>Configuration settings</h2>
      </legend>

      <div class="editor-label">
        <label for="DeviceType">Device type</label>
      </div>
      <div class="editor-field">
        <select class="DeviceTypeDDL" data-val="true" data-val-number="The field DeviceTypeSelectedItem must be a number." id="DeviceTypeSelectedItem" name="DeviceTypeSelectedItem"><option value="8">IT</option>
<option value="9">RS</option>
</select>
        <span class="field-validation-valid" data-valmsg-for="DeviceTypeSelectedItem" data-valmsg-replace="true"></span>
      </div>

       <div class="editor-label">
        <label for="ConfigGroup">ConfigGroup</label>
      </div>
      <div class="editor-field">
        <select class="ConfigGroupDDL" data-val="true" data-val-number="The field ConfigGroupSelectedItem must be a number." id="ConfigGroupSelectedItem" name="ConfigGroupSelectedItem"><option value="-1">No value</option>
</select>
        <span class="field-validation-valid" data-valmsg-for="ConfigGroupSelectedItem" data-valmsg-replace="true"></span>
      </div>

       <div class="editor-label">
        <label for="ConfigName">ConfigName</label>
      </div>
      <div class="editor-field">
        <select class="ConfigNameDDL" data-val="true" data-val-number="The field ConfigNameSelectedItem must be a number." id="ConfigNameSelectedItem" name="ConfigNameSelectedItem"><option value="-1">No value</option>
</select>
        <span class="field-validation-valid" data-valmsg-for="ConfigNameSelectedItem" data-valmsg-replace="true"></span>
      </div>

        <div class="editor-label">
        <label for="ConfigValue">ConfigValue</label>
      </div>
      <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-required="Please enter the configuration value" id="ConfigValue" name="ConfigValue" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="ConfigValue" data-valmsg-replace="true"></span>
      </div>

        <div class="editor-label">
        <label for="MergeOrDelete">MergeOrDelete</label>
      </div>
      <div class="editor-field">
        <select class="MergeDeleteDDL" data-val="true" data-val-number="The field MergeOrDeleteSelectedItem must be a number." id="MergeOrDeleteSelectedItem" name="MergeOrDeleteSelectedItem"><option value="0">Delete</option>
<option value="1">Merge</option>
</select>
        <span class="field-validation-valid" data-valmsg-for="MergeOrDeleteSelectedItem" data-valmsg-replace="true"></span>
      </div>


      <p>
        <input type="submit" value="Add" />
      </p>
    </fieldset>
</form>

配置设置
设备类型
信息技术
RS
配置组
没有价值
配置名称
没有价值
配置值
合并德莱特
删除
合并

问题是当第一个下拉列表被更改时，我需要填充这两个孩子。当第二个下拉列表被更改时，我只需要填充一个孩子

我认为通过设置

$（childClass）[0]，selectedIndex=0

然后这将使此值处于选中状态，这样当函数第二次使用刚刚填充的子下拉列表激发时，它将能够获得此值，但它没有

我在想，也许现在DOM中还没有新的版本，但我不确定

---

任何帮助都很好。

如果您知道需要选择的选项的价值，您可以使用：

$(childClass).val(valOfOption);

---

发布了一些其他选项

可能是，第二个

级联下拉列表

函数在第一个函数完成执行之前执行（因为您正在执行一个异步的AJAX调用）

让第二个函数等待第一个函数的一种方法是利用jQuery延迟：

function CascadeDropDowns(parentClass, childClass, action) {

   var completeDeferred = $.Deferred();
   var DropDownId = $(parentClass + " option:selected").val();

   $.ajax({
     url: "/Terminals_configuration/" + action,
     data: { DropDownId: DropDownId },
     dataType: "json",
     type: "POST",
     error: function () {
       alert("An error occurred.");
     },
     success: function (data) {
       var items = "";
       $.each(data, function (i, item) {
           items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
       });
         $(childClass).html(items);
         $(childClass)[0].selectedIndex = 0;
         completeDeferred.resolve();
     }
   });

   return completeDeferred;
}

更简单的方法可能是修改函数以接受回调：

function CascadeDropDowns(parentClass, childClass, action, callback) {
   var DropDownId = $(parentClass + " option:selected").val();

   $.ajax({
     url: "/Terminals_configuration/" + action,
     data: { DropDownId: DropDownId },
     dataType: "json",
     type: "POST",
     error: function () {
       alert("An error occurred.");
     },
     success: function (data) {
       var items = "";
       $.each(data, function (i, item) {
           items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
       });
         $(childClass).html(items);
         $(childClass)[0].selectedIndex = 0;
         if (callback) {
             callback();
         }
     }
   });
}

---

请添加您的HTML标记：）完成，希望您能为我提供一些帮助。如果您对回答问题不感兴趣，请不要发表任何评论。特别是在这种情况下，看到HTML是毫无意义的。谢谢，我会尝试一下，让你知道。第一个选项不起作用，但是回调起作用了。非常感谢。谢谢。但是选项是数据驱动的，因此可能会更改。见上面的公认答案。

function CascadeDropDowns(parentClass, childClass, action, callback) {
   var DropDownId = $(parentClass + " option:selected").val();

   $.ajax({
     url: "/Terminals_configuration/" + action,
     data: { DropDownId: DropDownId },
     dataType: "json",
     type: "POST",
     error: function () {
       alert("An error occurred.");
     },
     success: function (data) {
       var items = "";
       $.each(data, function (i, item) {
           items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
       });
         $(childClass).html(items);
         $(childClass)[0].selectedIndex = 0;
         if (callback) {
             callback();
         }
     }
   });
}

$(".DeviceTypeDDL").change(function () {
    var callback = function() {
        CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
    };
    CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback);
});