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

Question

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

问题是当我 select 一个国家时，相关城市正确绑定到城市 ddl 但第一个值 selected 到城市 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>

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

Answer 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 调用以填充用户可能不感兴趣的城市的工厂。最好添加默认 "Please select" 选项到城市下拉列表，这样用户就可以 select 一个城市并填充相关的工厂。

$('#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));
      });
    }
  });
})

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

Data binding for multiple dropdownlists for default shown values

jquery

cascadingdropdown

asp.net-mvc-5