Использование поля выбора для запуска события JS, чтобы сделать другое поле выбора пассивным / активным? HTML / JS

Question

Я хочу, чтобы поле выбора B стало видимым, если в поле выбора A выбран вариант 2, в противном случае оно должно оставаться скрытым. Это не работает. Вот мой код: [РЕДАКТИРОВАТЬ: я на самом деле хочу, чтобы он был пассивным, а не скрытым.]

Сначала JavaScript:

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>

Спасибо!

Answer 1

Я думаю, что это просто путаница атрибутов.Этот второй блок выбора имеет идентификатор icd, но вы пытаетесь изменить его с помощью document.getElementById('test').

EDIT . Другая проблема заключается в том, что вы не отправляете переменнуюдо toggle2, поэтому if-then всегда будет неудачным, и он всегда будет устанавливать видимость скрытым.Я думаю.

Answer 2

Вот несколько исправленных кодов

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

 <select class="select3" name="CaseType" onchange="toggle2(this)">
  <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>

Answer 3

Вы можете создать пустой <div> с идентификатором, и onchange, установить innerHTML на то, что вы хотите.

Nur

Answer 4

использование

document.getElementById('test').style.display='none';

чтобы скрыть элемент и

document.getElementById('test').style.display='';

чтобы показать это снова

и, кстати, при обращении к элементу с помощью getElementById ('test'), элемент должен содержать атрибут id, равный 'test'

<select id="test" class="select4" name="test" style="visibility: hidden;">