JSFiddle - React, Tailwind, and code Playground

by marson parulian

HTML

<select id="country">
    <option value="Türkiye">Turkey</option>
    <option value="UK">United Kingdom</option>
    <option value="USA">USA</option>
</select>
<select id="city">
    <option value="0">Izmir</option>
    <option value="1">Ankhara</option>
</select>
<select id="town">
    <option value="Merkez">Merkez</option>
    <option value="izmirtowna">Izmir Town A</option>
</select>

JavaScript

$(document).ready(function () {
    var city = $('#city');
    var town = $('#town');
    $('#country').change(function () {
        var country = $(this).val();
        if (country != 'Türkiye') {
            $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
            $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
        } else {
            $('#city').replaceWith(city);
            $('#town').replaceWith(town);
        }
    });
    // Need to attach event handlers for newly inserted city & town options
    // Note: value of town names in HTML are changed to number based value (0 & 1)
    $(document).on('change','#city' ,function(){
    	var city = $(this).val();
        // Clear town options 
        $("#town").html("");
        // Then append town names based on selected city
        for(var i=0; i<towns[city].length; i++){
      		$("#town").append("<option value='"+towns[city][i].val+"' >"+towns[city][i].label+"</option>");  
        }
    });
    // Town names. Assuming town names are hardcoded correspond to city name.
    var towns = [[
            {val: "merkez", label: "Merkez"}, 
            {val: "izmirtowna", label: "Izmir Town A"}
        ],[
            {val: "ankharatowna", label: "Ankhara Town A"}, 
            {val: "ankharatownb", label: "Ankhara Town B"}
    ]];
});