JSFiddle - React, Tailwind, and code Playground
HTML
<select id="Country"></select>
<select id="State"></select>
JavaScript
var Country = ['NEPAL', 'USA', 'CHINA'];
var NepalState = ['Gandaki', 'Bagmati'];
var USAState = ['Texas', 'California'];
var ChinaState = ['Phing', 'xing'];
$('#Country').change(function() {
var stateOption='';
var countryvar = $('#Country option:selected').val();
switch (countryvar) {
case 'NEPAL':
$.each(NepalState, function(index, value) {
stateOption += '<option>' + value + '</option>';
});
break;
case 'USA':
$.each(USAState, function(index, value) {
stateOption += '<option>' + value + '</option>';
});
break;
case 'CHINA':
$.each(ChinaState, function(index, value) {
stateOption += '<option>' + value + '</option>';
});
break;
}
$('#State').html('');
$('#State').append(stateOption);
});
var CountryOption='';
$.each(Country, function(index, value) {
CountryOption += '<option>' + value + '</option>';
});
$('#Country').append(CountryOption);
$('#Country').trigger('change');