Question

I want select box B to become visible when option 2 is selected in select box A, otherwise it should remain hidden. It’s not working. Here’s my code: [EDIT: I actually want it to be passive instead of hidden.]

The JavaScript first:

function toggle2(value){
if(value=='confirm')
 document.getElementById('test').style.visibility='visible';
else
 document.getElementById('test').style.visibility='hidden';
}




 <select class="select3" name="CaseType" onchange="toggle2()">
  <option value="select" selected="selected">- Select Case Type -</option>
  <option value="suspect">Suspected</option>
  <option value="confirm">Confirmed</option>
  </select>

  <select id="test" class="select4" name="test" style="visibility: hidden;">
  <option selected="selected">- Select test -</option>
  </select>

Thanks!

Answer 1

I think this is just a simple attribute mix-up. That second select box has an id of icd, but you’re trying to change it with document.getElementById('test').

EDIT: Another problem is that you’re not sending any variable to toggle2, so the if-then will always fail, and it will always set the visibility to hidden. I think.