<onchange="first(this);> <option value="empty"></option> <option value="1">1</option> <option value="2">2</option>
<id="second"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option>
One solution that I would prefer is to set the style to none via CSS in JS. This way, the element still exists but it is just hidden from the viewer.
You can the get value of an element via
[element-here].value and compare the to some value that you want. From there, you would select the second drop down option value you have and run
[element-here].style.display = "none"
Another way that is more complicated that I would not recommend is to create and destroy elements entirely. Something like:
var x = document.createElement("option"); x.value = VALUE HERE; parent.appendChild(document.createTextNode("TEXT HERE"))