JSFiddle - React, Tailwind, and code Playground
HTML
<select id="vehichleDropdown" onchange="onVehichleDropdownChange()">
<option id="1">Car</option>
<option id="2">Bike</option>
</select>
<br />
<br />
<select id="makeDropdown" onchange="onMakeDropdownChange()">
<option id="1">Ford</option>
<option id="2">Toyota</option>
</select>
<br />
<br /> Result
<input type="text" id="result" />
JavaScript
onVehichleDropdownChange = function() {
var vehichleDropdown = document.getElementById("vehichleDropdown");
var makeDropdown = document.getElementById("makeDropdown");
makeDropdown.options[0] = null;
makeDropdown.options[0] = null;
if (vehichleDropdown.selectedIndex == 0) {
var option1 = document.createElement("option");
option1.text = option1.value = "Ford";
makeDropdown.add(option1, 0);
var option2 = document.createElement("option");
option2.text = option2.value = "Toyota";
makeDropdown.add(option2, 0);
} else if (vehichleDropdown.selectedIndex == 1) {
var option1 = document.createElement("option");
option1.text = option1.value = "Harley";
makeDropdown.add(option1, 0);
var option2 = document.createElement("option");
option2.text = option2.value = "Ducati";
makeDropdown.add(option2, 0);
}
makeDropdown.onchange();
}
onMakeDropdownChange = function() {
var resultText = document.getElementById("result");
resultText.value = vehichleDropdown.options[vehichleDropdown.selectedIndex].text + ':' + makeDropdown.options[makeDropdown.selectedIndex].text;
}