JSFiddle - React, Tailwind, and code Playground

by Yashpreet Singh

HTML

<select id="state" name="state">
<option value="">Select State</option>
<option value="UttarPradesh">UttarPradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="WestBengal">WestBengal</option>
</select>
<select id="city" name="city" value="">
<option value="">Select City</option>
</select>

JavaScript

$(document).ready(function(){
    $("#state").change(function (e) {
        fill_city('state','city');
    });

});
var city_list=new Array();
city_list[0] = "";
city_list[1] = "b1|b2|b3";
city_list[2]="c1|c2|c3";
city_list[3]="a1|a2|a3";

//fill city Function
function fill_city(state,city){
   var e2=$("select[name='state'] option:selected").index();
   var e3 = document.getElementById(city);
   e3.length = 0;
   e3.options[0] = new Option('Select City', '');
   e3.selectedIndex = 0;
   var city_array = city_list[e2].split("|");
   for (var i = 0; i < city_array.length; i++) {
       e3.options[e3.length] = new Option(city_array[i],             city_array[i]);
		}
}