以编程方式选择一个选项时，“ on change”不会触发

Question

我有一个CodePen ，可以在选择一个country后加载cities ...，现在使用//$("#country").val("3"); 代码注释了“手动”更改的方式效果很好。

但是，“自动”（代码取消注释）的负载country不改变城市......为什么？

PS。 我不想手动触发“更改”事件。 对我来说很奇怪，我应该手工做...

 document.addEventListener("DOMContentLoaded", function(event) { var countries = { "1": ["Paris", "Lyon"], "2": ["Berlin", "Cologne"], "3": ["London", "Edinburgh"] }; function loadCities(countryId) { var cities = countries[countryId]; var container = "#city"; $(container).empty(); $(container).append($("<option/>", { value: 0, text: "select a city..." })); $.each(cities, function(key, city) { $(container).append($("<option/>", { text: city })); }); } $("#country").on("change", function() { var countryId = $(this).val(); loadCities(countryId); }); $("#country").val("3");//.trigger("change"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country"> <option value="0">select a country</option> <option value="1">France</option> <option value="2">Germany</option> <option value="3">UK</option> </select> <select id="city"> <option value="0">no country selected</option> </select> 

Answer 1

如果您不想“触发更改”，则始终可以自行调用该函数。

function selectCountry(countryId) {
    $("#country").val(countryId);
    loadCities(countryId)
}

然后替换为：

 $("#country").val("3");//.trigger("change"); 

有了这个：

selectCountry("3")

Answer 2

您还必须触发change事件，如下所示：

$("#country").val("3");
$("#country").trigger("change");

仅当用户键入输入时onchange才会触发，然后输入失去焦点。 它不能是默认操作，因为您不希望仅当用户与元素进行交互时才希望自动值更改不会触发事件。

原因可能是某些人在.change()调用.val() ，因为他们确实进行了输入验证。 触发.change()上.val()会导致一个无限循环。

Answer 3

 document.addEventListener("DOMContentLoaded", function(event) { var cities = { "1": ["Paris", "Lyon"], "2": ["Berlin", "Cologne"], "3": ["London", "Edinburgh"] }; function loadCities(countryId) { //get the city names if we can var cityNames = cities[countryId]; //get a reference to the container var $container = $('#city'); //create an array of the options we want to replace the city with //building a list of the options allows us to optimize in two ways //1) Not using jQuery to create the options removes some overhead with // jQuery creating the DOM nodes one at a time //2) Replacing all the options at the end reduces the number of times // you manipulate the DOM and reduce the number of times it has to // perform calculations about how it is going to re-draw the page var options = ['<option value="0">select a city...</option>']; //we will have cityNames if the countryId is not 0 if (cityNames) { //make an option for each city cityNames.forEach(function(city){ options.push('<option>'+ city +'</option>'); }); } else { //user did not select a country, default the city back to the original //message options = ['<option value="0">no country selected</option>']; } //replace all the options with the new options. This will be a single //DOM change $container.html(options); } $("#country") //bind the on change like we were before .on("change", function() { var countryId = $(this).val(); loadCities(countryId); }) //also change the value .val("3"); //call loadCities directly to update the city dropdown loadCities("3"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="country"> <option value="0">select a country</option> <option value="1">France</option> <option value="2">Germany</option> <option value="3">UK</option> </select> <select id="city"> <option value="0">no country selected</option> </select>