JSFiddle - React, Tailwind, and code Playground

by A B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true"></select>
        </div>
        <div class="col-md-6">
            <select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"></select>
        </div>
    </div>
</div>

JavaScript

var provinceCssSelector = '.ps-prov';
var municipeCssSelector = '.ps-mun';
var provinceDefaultText = 'Provincia';
var municipeDefaultText = 'Municipio';

var provinces = [];
provinces.push({code: 'MI', name: 'Milano'});
provinces.push({code: 'CO', name: 'Como'});
provinces.push({code: 'TO', name: 'Torino'});
provinces.push({code: 'NA', name: 'Napoli'});

var municipes = [];
municipes.push({cod_prov: 'MI', name: 'Milano'});
municipes.push({cod_prov: 'CO', name: 'Como'});
municipes.push({cod_prov: 'TO', name: 'Torino'});
municipes.push({cod_prov: 'NA', name: 'Napoli'});

// Set default text
$(provinceCssSelector).append($('<option>').text(provinceDefaultText).attr('value', -1));
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));

// Populate province select
$.each(provinces, function(number, province) {
  $(provinceCssSelector).append($('<option>').text(province.name).attr('value', province.code));
});

$('.selectpicker').selectpicker();

// When selected province changes, populate municipe select
$(provinceCssSelector).change(function() {
    var selectedProvince = this.value;
    $(municipeCssSelector).empty();
    $(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
    $.each(municipes, function(number, municipe) {
      if (municipe.cod_prov == selectedProvince) {
        $(municipeCssSelector).append($('<option>').text(municipe.name).attr('value', number.toString()));
      }
    });
    $(municipeCssSelector).selectpicker('refresh');
  });