默認顯示值的多個下拉列表的數據綁定

我有3個下拉列表要填充（級聯）。國家，城市和工廠。所有三個下拉列表中的數據都會正確綁定。默認顯示值的多個下拉列表的數據綁定

問題是，當我選擇一個國家，相關城市被正確綁定到城市ddl但第一個值被選中到城市ddl（默認顯示的值），工廠ddl沒有顯示相關的工廠。但是，如果我從城市ddl中選擇另一個元素，然後再次點擊默認顯示的城市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>

所有幫助讚賞。提前致謝！

來源

2015-09-30 Isuru

您的意思是您期望工廠的下拉列表在您選擇國家時填充？ –

@Stephen Muecke，謝謝你回覆:)不，我希望工廠ddl在我選擇城市時填充。除了第一次城市ddl被填充時，它才起作用。我必須選擇城市ddl的另一個元素，然後來到城市ddl的第一個元素，以填充第一個元素的相關工廠。 – Isuru

那就是我的意思。當您選擇一個國家時，會顯示城市並選擇第一個城市。你是否期待展示該城市的工廠？（它不會像你目前所擁有的那樣） –

需要，一旦你填寫的城市中，從而使相關的工廠再裝

$('#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到服務器，填入觸發.change()事件的城市下拉列表用戶可能不感興趣的城市工廠。最好在城市下拉列表中添加默認的「請選擇」選項，以便用戶可以選擇城市並填充關聯的工廠。

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

來源

2015-09-30 07:47:11

非常感謝解決方案:)第二個工作正常，我會繼續堅持下去，因爲它避免了額外的開銷。第一個解決方案，當我選擇一個國家，給出城市列表並顯示該列表的第一個值。但是相關的工廠沒有得到滿足。然後，如果我選擇另一個城市，相關工廠會被填充，但是突然間，所選擇的城市會自動進入第一個元素，並且相關工廠列表也會根據該城市進行更改。請幫我解決這個問題？ – Isuru

哎呀，對不起，我正在觸發'.change（）'在錯誤的元素上（應該在'SelectedCity'上）。查看更新。 –

真的非常感謝您的幫助。是的，現在它工作:) – Isuru

默認顯示值的多個下拉列表的數據綁定

回答

相關問題