使用选择框触发JS事件以使另一个选择框变为被动/主动吗？ HTML / JS

Question

我希望在选择框A中选择选项2时，选择框B变得可见，否则应保持隐藏状态。 没用 这是我的代码：[编辑：我实际上希望它是被动的而不是隐藏的。]

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

我认为这只是一个简单的属性混淆。 第二个选择框的ID为icd ，但您尝试使用document.getElementById('test')进行更改。

编辑 ：另一个问题是您没有将任何变量发送到toggle2 ，因此if-then将始终失败，并且它将始终将可见性设置为hidden。 我认为。

Answer 2

采用

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

隐藏元素和

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

再次显示

顺便说一下，当使用getElementById（'test'）访问元素时，元素必须包含等于'test'的id属性

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

Answer 3

您可以创建一个具有ID的空<div> ，然后onchange，将innerHTML设置为您想要的任何内容。

努尔

Answer 4

这是一些修改后的代码

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>