默认显示值的多个下拉列表的数据绑定答案

【问题标题】：Data binding for multiple dropdownlists for default shown values默认显示值的多个下拉列表的数据绑定
【发布时间】：2015-09-30 06:51:17
【问题描述】：

我有 3 个要填充的下拉列表（级联）。国家、城市和工厂。数据确实为所有三个下拉列表正确绑定。

问题是当我选择一个国家时，相关城市会正确绑定到城市 ddl，但是对于选择到城市 ddl 的第一个值（默认显示值），工厂 ddl 不显示相关工厂。但是，如果我从 city ddl 中选择另一个元素，然后再次单击 city ddl 的默认显示元素，它可以正常工作。这是我的脚本

<script>
//For ddls
var cityDropdown = $("#SelectedCity"); 

$('#SelectedCountry').change(function () {
    $.ajax({
        url: '@Url.Action("FillCity", "Godown")', 
        type: "GET",
        dataType: "JSON",
        data: { Country: $(this).val() }, 
        success: function (cities) {
            cityDropdown.empty();
            $.each(cities, function (i, city) {
                cityDropdown.append($('<option></option>').val(city.CityId).html(city.CityName));
            });
        }
    });
})

var factoryDropdown = $("#SelectedFactory"); 
        $('#SelectedCity').change(function () {
            $.ajax({
                url: '@Url.Action("FillFactory", "Godown")', 
                type: "GET",
                dataType: "JSON",
                data: {City: $(this).val() }, 
                success: function (factories) {
                  factoryDropdown.empty();
                    $.each(factories, function (i, factory) {
                       factoryDropdown.append($('<option></option>').val(factory.FactoryId).html(factory.FactoryName));
                    });
                }
            });
        })
    </script>

感谢所有帮助。提前致谢！

【问题讨论】：

您的意思是您希望在选择国家/地区时填充工厂下拉列表吗？
@Stephen Muecke，感谢您的回复:) 不，我希望在选择城市时填充工厂 ddl。除了第一次填充城市 ddl 外，它都有效。我必须选择 city ddl 的另一个元素，然后来到 city ddl 的第一个元素来填充第一个元素的相关工厂。
这就是我的意思。当您选择国家时，将显示城市并选择第一个城市。你期待那个城市的工厂被展示吗？（它不会像你现在拥有的那样）
@Stephen Muecke，是的，你是对的。我期待工厂默认选择的城市 ddl 值。
那么你需要触发城市下拉列表的更改事件，但是你确定你想要这样做的额外开销。通常，您会在城市中呈现“请选择”选项，这是默认设置，并让用户选择一个城市，然后加载工厂

标签： jquery asp.net-mvc-5 cascadingdropdown

【解决方案1】：

填充城市后，您需要触发“城市”下拉列表的.change() 事件，以便加载关联的工厂

$('#SelectedCountry').change(function () {
  $.ajax({
    ....
    success: function (cities) {
      cityDropdown.empty();
      $.each(cities, function (i, city) {
        cityDropdown.append($('<option></option>').val(city.CityId).html(city.CityName));
      });
      $('#SelectedCity').trigger('change'); // add this
    }
  });
})

但是，这会不必要地对服务器进行 ajax 调用以填充用户可能不感兴趣的城市的工厂。最好在城市下拉列表中添加默认的“请选择”选项，以便然后用户可以选择一个城市并填充相关的工厂。

$('#SelectedCountry').change(function () {
  $.ajax({
    ....
    success: function (cities) {
      cityDropdown.empty();
      cityDropdown.append($('<option></option>').val('').html('Please select')); // add this
      $.each(cities, function (i, city) {
        cityDropdown.append($('<option></option>').val(city.CityId).html(city.CityName));
      });
    }
  });
})

【讨论】：

非常感谢您的解决方案 :) 第二个工作正常，我会坚持下去，因为它避免了额外的开销。当我选择一个国家时，第一个解决方案是给出城市列表并显示该列表的第一个值。但是相关的工厂并没有被填充。然后，如果我选择另一个城市，相关工厂会被填充，但突然间，所选城市会自动成为第一个元素，并且相关工厂列表也会根据该城市进行更改。请帮我解决这个问题？
糟糕，抱歉，我在错误的元素上触发了 .change()（应该在 SelectedCity 上）。查看更新。
非常感谢您的帮助。是的，现在它正在工作:)