JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<select id="firstselectbox">
    <option value="">Select a Color</option>
    <option value="blue">Blue</option>
    <option value="black">Black</option>
    <option value="red">Red</option>
</select>
<select id=secondselectbox></select>

<script>
    var datajson = {
	"blue": [{
		"med": [{
			"id": "med",
			"name": "Medium",
		}],
		"small": [{
			"id": "small",
			"name": "Small"
		}]
	}],
	"black": [{
		"small": [{
			"id": "small",
			"name": "Small"
		}]
	}],
	"red": [{
		"large": [{
			"id": "large",
			"name": "Large",
		}],
        "med": [{
			"id": "med",
			"name": "Medium",
		}],
		"small": [{
			"id": "small",
			"name": "Small"
		}]
	}],
};
</script>

JavaScript

$("#firstselectbox").on('change', function () {
        var locations = datajson[$(this).val()];
        var locationString = '';
        $.each(locations[0], function (i, item) {            
            locationString += '<option value="' + item[0].id + '">' + item[0].name + '</option>';
        });
        console.log(locationString)
        $('#secondselectbox').html(locationString);
    });