JS - Bootstrap Select

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>


 

  <select id="country" class="selectpicker show-tick" title="Select Country">
    <option>France</option>
    <option>Germany</option>
    <option>Russia</option>
  </select>

JavaScript

// Select city when country changes

$('#country').on('rendered.bs.select', function() {
  set_city($(this).val());
});

// Get data

var data = {
  name: "John",
  country: "Germany",
  city: "Berlin"
}


// Update fields

$.each(data, function(field, value) {
  $("#" + field).selectpicker('val', value);
});

/////////////////////////////////////////////

function set_city(country) {

  switch (country) {
    case "France":
      $("#city").selectpicker('val', "Paris");
      break;
    case "Germany":
      $("#city").selectpicker('val', "Berlin");
      break;
    case "Russia":
      $("#city").selectpicker('val', "Moscow");
      break;
  }
}