JSFiddle - React, Tailwind, and code Playground
HTML
<select id="first">
<option value="uno">uno</option>
<option value="dos">dos</option>
<option value="tres">tres</option>
</select>
<select id="second">
<option value="uno">uno</option>
<option value="dos">dos</option>
<option value="tres">tres</option>
</select>
JavaScript
const first = document.getElementById('first');
const second = document.getElementById('second');
const options = {
'uno': ['uno', 'dos', 'tres'],
'dos': ['cuatro', 'cinco'],
'tres': ['seis', 'sieto', 'ocho']
};
first.addEventListener('change', function(e) {
// Get current value from first select
let val = this.value;
// Clear second select
second.innerHTML = '';
// Get options by current value
for (var i = options[val].length - 1; i >= 0; i--) {
// Create new option
let option = createOption(options[val][i], options[val][i]);
// Append option to the second select
second.appendChild(option);
}
});
/* Fucntion to craete option */
function createOption(text, value) {
const option = document.createElement('option');
option.innerText = text;
option.value = value;
return option;
}