JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<select id="first" >
    <option>1</option>
    <option>2</option>
    <option>3</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 ['a','b','c'];
    if(val == 2)
        return [1,2,3,4];
    return ['a1','a2','a3'];
}