MVC 下拉列表填充另一个下拉列表答案

【问题标题】：MVC Dropdownlist Populating Another DropdownlistMVC 下拉列表填充另一个下拉列表
【发布时间】：2016-04-14 12:19:00
【问题描述】：

在 MVC 中创建了一个包含 2 个输入字段和 3 个级联下拉列表的表单。

下拉列表填充每一个都很好，我的问题是当下拉列表只拉回一个结果时，它不允许我选择一个结果来填充下一个对应的下拉列表。

jQuery 代码，

  var server = "";
    function populateDropdown(dropdownId, requestPath, requestData, valueFunction, textFunction) {
        var dropDown = $("#" + dropdownId);
        dropDown.val(null);
        dropDown.empty();
        $.getJSON(requestPath, requestData, function (data) {

            if (!data || !data.result)
                return;

            $.each(data.result, function (index, object) {
                dropDown.append($("<option />").val(valueFunction(object)).text(textFunction(object)));
            });
        });
    }

    $(document).ready(function () {
        $("#serverTextbox").blur(function () {
            var newServer = $.trim($(this).val());
            if (newServer === server)
                return;
            server = newServer;
            populateDropdown('usersCombo', 'LoadUsers', { server: server },
                function (object) { return object; },
                function (object) { return object; });
        });

        $("#usersCombo").change(function () {
            var user = $.trim($(this).val());
            populateDropdown('databaseCombo', 'LoadDatabases', { server: server, user: user },
                function (object) { return object; },
                function (object) { return object; });
        });

        $("#databaseCombo").change(function () {
            var database = $.trim($(this).val());
            populateDropdown('companyCombo', 'LoadCompanies', { server: server, database: database },
                function (object) { return object; },
                function (object) { return object; });
        });
    });

这也是我的问题，

Issue with dropdownlists

【问题讨论】：

标签： javascript jquery model-view-controller drop-down-menu

【解决方案1】：

如果只有一个结果，则在您附加选项后，trigger a change：-

function populateDropdown(dropdownId, requestPath, requestData, valueFunction, textFunction) {
  var dropDown = $("#" + dropdownId);
  dropDown.val(null);
  dropDown.empty();
  $.getJSON(requestPath, requestData, function(data) {

    if (!data || !data.result)
      return;

    $.each(data.result, function(index, object) {
      dropDown.append($("<option />").val(valueFunction(object)).text(textFunction(object)));
    });

    if (data.result.length == 1) {
      dropDown.trigger('change');
    }
  });
}

【讨论】：

【解决方案2】：

问题是在只有一个选项时使用更改事件。为了允许用户更改值，您需要添加一个替代项，例如一个空条目。

但是，如果您需要显示该唯一选项并仍填充下一个下拉菜单，我会看到两个不同的选项：

使用单击处理程序（否则为什么要单击一个条目下拉菜单？）
立即填充下一个下拉列表（毕竟，这是唯一的用户的选项）

【讨论】：