Question

I have a <select> menu on my page.

I’d like it so if the selectedIndex doesn’t equal ‘1’ (i.e. if (this.selectedIndex!=1)) then it disables (<select disabled="disabled">) another <select> menu on my web page.

How do I achieve this?

Thank you.

Answer 1

<select id="first"><option>a</option><option>b</option></select>
<select id="second"></select>

<script type="text/javascript">
    document.getElementById('first').addEventListener('change', function() {
       if(this.selectedIndex != 1) {
           document.getElementById('second').disabled = true;
       }
       else {
           document.getElementById('second').disabled = false;
       }
    });
</script>

jsFiddle Demo