Two Drop Down Menus

I wish I could use jQuery, but this has to in JavaScript. I’d appreciate the help. When “empty” (first drop down menu) is selected, I need all values from the second drop down menu (a, b, c). When “1” is selected, I need just a, b. When “2” is selected, I need just b, c.

Nothing’s wrong with the drop down menu. Just had to change the values. How would I fix this in JavaScript?

First menu

<onchange="first(this);>
<option value="empty"></option>
<option value="1">1</option>
<option value="2">2</option>

Second menu

<id="second">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>

Answer

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"))