Question

I’m trying to make a selector that will show options based off of what you have chosen in another select field. It looks like this:

           <select name="field2" id="field2" required="required">
                <option id="field2-1" value="os1">
                     os1
                </option>
                <option id="field2-2" value="os2">
                     os2
                </option>
                <option id="field2-3" value="os3">
                     os3
                </option>
           </select>

Then I have a second selector with these options:

           <select name="field3" id="field3" required="required">
                <option id="field3-1" value="dl1">
                     dl1
                </option>
                <option id="field3-2" value="dl2">
                     dl2
                </option>
           </select>

Basically what I need to happen is this: if os1 is selected in the first selector, then both dl1 and dl2 will be availible in the second selector.

If os2 or os3 is selected in the first selector, dl1 will be hidden, and only dl2 will be shown in the second selector.

I can’t seem to find a solid solution for this, but I’m not the best at js, so hopefully one of you can point me in the right direction.

Thanks 🙂

Answer 1

Vanilla JS solution (no jQuery required) – DEMO

var selectOne = document.getElementById("field2");

selectOne.addEventListener("change", function() {
    if (this.options[this.selectedIndex].value == 'os2' || this.options[this.selectedIndex].value == 'os3') {
        document.getElementById('field3-2').style.display = "none";
    } else {
        document.getElementById('field3-2').style.display = "block";
    }
}, false);