"on change" does not fire when programatically select an option

Question

I have a CodePen that loads cities after a country is selected..., now with //$("#country").val("3"); code commented the "manual" change of the coutry works well.

But the "automatic" (code uncommented) load of the country does not change the cities... why?

PS. I don't want to trigger "change" event manually. for me is strange I should do it by hand...

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

If you don't want to "trigger change" you can always call the function on your own.

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

then replace this:

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

with this:

selectCountry("3")

Answer 2

You have to also trigger the change event, like this:

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

onchange only fires when the user types into the input and then the input loses focus. It cannot be the default action as many times you do not want the event triggering from an automated value change, only when a user interacts with the element.

The reason may be that some people call .val() in .change() because they do input validation. Triggering .change() on .val() would cause an infinite loop.

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>