0

我正在尝试创建一些级联下拉菜单，我有这个我构建的函数，它有一半可以工作：

 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;then 这将使这个值被选中，这样当函数第二次使用刚刚填充的子下拉菜单触发时，它将能够获得这个值，但事实并非如此。

我在想也许新的现在在 DOM 中不可用，但我不确定。

任何帮助都会很棒。

4

2 回答 2

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);
});
于 2013-02-26T12:04:26.887 回答
0

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

$(childClass).val(valOfOption);

这里发布了一些其他选项

于 2013-02-26T12:02:14.947 回答