JSFiddle - React, Tailwind, and code Playground

HTML

<select id="mainDropdown">
    <option value="0">Please Select</option>
</select>
<br/>
<select id="secondaryDropdown">
    <option value="0">Make a selection in other dropdown first</option>
</select>

JavaScript

var mainDropdownValues = {1: "one", 
                           2: "two",
                           3: "three",
                           4: "four"};

var firstSelectionValues = { 1: "one one",2: "twotwo" };
var secondSelectionValues = { 1: "two one" };
var thirdSelectionValues = { 1: "three one"};
var fourthSelectionValues = { 1: "four one"};

var assignValuesToDropDown = function( dropdownSelector, valuesArray ){
    var seloption = '';
    
    $.each( valuesArray, function(index, value){
        
         seloption += '<option value="'+ index +'">'+ value +'</option>';
    });
    
    $(dropdownSelector).append(seloption);
    
};

$().ready(function(){
    assignValuesToDropDown( "#mainDropdown", mainDropdownValues );
    
    $('#mainDropdown').on('change', function(){
        var selectedOptionValue = $('#mainDropdown').val();
        var dropDownValues = {};
        
        if( selectedOptionValue == 1 ){
                dropDownValues = firstSelectionValues;
        }else if( selectedOptionValue == 2 ){
                dropDownValues = secondSelectionValues;
        }else if( selectedOptionValue == 3 ){
                dropDownValues = thirdSelectionValues;
        }else if( selectedOptionValue == 4 ){
                dropDownValues = fourthSelectionValues;
        }else{
                dropDownValues = {};
        }
        assignValuesToDropDown( "#secondaryDropdown", dropDownValues );
    });
});