使用jQuery设置选择后，无法获取SELECT的选择值

Question

我正在尝试创建一些级联的下拉菜单，我已经建立了可以正常工作的函数：

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

相关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>

问题是，当第一个下拉菜单更改时，我将需要填充两个孩子。 当第二个下拉菜单更改时，我只需要填充一个孩子。

我认为通过设置$(childClass)[0].selectedIndex = 0; 那么这将使该值处于选中状态，以便当该函数第二次使用刚刚填充的子下拉菜单触发时，便可以获取该值，但并非如此。

我在想也许新的东西目前还不能在DOM中使用，但是我不确定。

任何帮助都会很棒。

Answer 1

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

使第二个函数等待第一个函数的一种方法是利用jQuery deferreds：

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

然后使用返回的延迟：

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

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

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

Answer 2

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

$(childClass).val(valOfOption);

有发布一些其他的选择在这里