JSFiddle - React, Tailwind, and code Playground
HTML
<select name="firstselect">
<option value="0" selected="selected">Choose...</option>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select name="secondselect" disabled="disabled">
<option value='0' selected='selected'>Choose...</option>
</select>
JavaScript
var dataset = [
{ set: 1, data: [
{ val: "value11", label: "Value 1 - 1" },
{ val: "value12", label: "Value 1 - 2" },
{ val: "value13", label: "Value 1 - 3" } ]
},
{ set: 2, data: [
{ val: "value21", label: "Value 2 - 1" },
{ val: "value22", label: "Value 2 - 2" },
{ val: "value23", label: "Value 2 - 3" } ]
}];
var chooser = "<option value='0' selected='selected'>Choose...</option>";
$(document).ready(function(){
$('select[name="firstselect"]').change(function(){
//get value of data set
var n = $(this).val() ;
if ( n != 0 ) {
var str = chooser;
n--;
//write options
for (i=0; i<dataset[n].data.length; i++) {
str += "<option value='" + dataset[n].data[i].val + "'>" + dataset[n].data[i].label + "</option>"
}
//add options to select
$('select[name="secondselect"]').html(str).attr("disabled",false);
}
});
});