JSFiddle - React, Tailwind, and code Playground

HTML

<select id="first" >
    <option>US</option>
    <option>CA</option>
    <option>IN</option>
</select>
<br/><br/><br/><br/>
<select id="second" >
</select>

CSS

select{
    width : 100px;
    text-align : center;
}

JavaScript

$('select#first').change(function(e){
    var newOptions = getNewOptions($(this).val());
    $('select#second').html('')   // clear the existing options
    $.each(newOptions,function(i,o){
        $('<option>' + o + '</option>').appendTo('select#second');
    });            
});

function getNewOptions(val){
    if (val == 1)
        return ['AZ','TX','FL'];
    if(val == 2)
        return ['BC','ON','AL','QC'];
    return ['TN','KL','AP'];
}