从下拉列表中选择选项时,Javascript显示隐藏的div

Question

我在Form上有5个下拉列表,在这个列表下我有需要用户输入的DIV元素.我显示第一个下拉列表的第一个DIV,并使用style ="display:none;"隐藏所有其他表单.

我正在寻找一个Javascript,当我从第二个下拉列表中选择任何选项时,它将显示第二个DIV.

任何援助将不胜感激.

提前谢谢,瑞安史密斯

<tr>
 <td>Destination 1</td><td>Destination 2</td><td>Destination 3</td><td>Destination 4</td><td>Destination 5</td>
 </tr>
 <tr>
 <td> 
<SELECT NAME=drop1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionsdest?> 
</SELECT> 
</td>
 <td> 
<SELECT NAME=drop2 style="width:150px;" onChange="javascript to show DIV leg1b">  
<OPTION VALUE=1><?=$optionsdest?> 
</SELECT> 
</td>
 <td> 
<SELECT NAME=drop3 style="width:150px;"  onChange="javascript to show DIV leg1c">  
<OPTION VALUE=0>0
<OPTION VALUE=1>1
</SELECT> 
</td>
 <td> 
<SELECT NAME=drop4 style="width:150px;"   onChange="javascript to show DIV leg1d">  
<OPTION VALUE=0>
<?=$optionsdest?> 
</SELECT>
</td>
 <td> 
<SELECT NAME=drop5 style="width:150px;"   onChange="javascript to show DIV leg1e">  
<OPTION VALUE=0>
<?=$optionsdest?> 
</SELECT>
</td>
</tr>

<tr>
 <td>

 Arrive Drop 1
 <br>
 <input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>>
 <br>
 <SELECT NAME=arrivetime1 style="width:150px;"> 
 <OPTION VALUE=0>
 <?=$optionstime?> 
 </SELECT>
<br>
 Depart Drop 1
 <br>
 <input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>>
 <br>
 <SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionstime?> 
</SELECT>

 </td>

  <td>
 <div id='legb1' style="display: none;">
 Arrive Drop 2
 <br>
 <input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>>
 <br>
 <SELECT NAME=arrivetime1 style="width:150px;"> 
 <OPTION VALUE=0>
 <?=$optionstime?> 
 </SELECT>
<br>
 Depart Drop 2
 <br>
 <input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>>
 <br>
 <SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionstime?> 
</SELECT>
 </div>
 </td>


  <td>
 <div id='legc1' style="display: none;">
 Arrive Drop 3
 <br>
 <input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>>
 <br>
 <SELECT NAME=arrivetime1 style="width:150px;"> 
 <OPTION VALUE=0>
 <?=$optionstime?> 
 </SELECT>
<br>
 Depart Drop 3
 <br>
 <input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>>
 <br>
 <SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionstime?> 
</SELECT>
 </div>
 </td>


  <td>
 <div id='legd1' style="display: none;">
 Arrive Drop 4
 <br>
 <input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>>
 <br>
 <SELECT NAME=arrivetime1 style="width:150px;"> 
 <OPTION VALUE=0>
 <?=$optionstime?> 
 </SELECT>
<br>
 Depart Drop 4
 <br>
 <input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>>
 <br>
 <SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionstime?> 
</SELECT>
 </div>
 </td>


  <td>
 <div id='lege1' style="display: none;">
 Arrive Drop 5
 <br>
 <input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>>
 <br>
 <SELECT NAME=arrivetime1 style="width:150px;"> 
 <OPTION VALUE=0>
 <?=$optionstime?> 
 </SELECT>
<br>
 Depart Drop 5
 <br>
 <input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>>
 <br>
 <SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0>
<?=$optionstime?> 
</SELECT>

 </td>


</tr>

Answer 1

这是一个示例 - 我将与名称相同的 ID 添加到选择中

http://jsfiddle.net/mplungjan/32Ukf/

普通JS

var sels = {drop2:"legb1",drop3:"legc1",drop4:"legd1",drop5:"lege1"};  
window.onload=function() {
  for (var sel in sels) {
      document.getElementById(sels[sel]).style.display = document.getElementById(sel).selectedIndex>0?"block":"none";
      document.getElementById(sel).onchange=function() {
        document.getElementById(sels[this.id]).style.display = this.selectedIndex>0?"block":"none";
      }
    }
}