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

Question

我在一个表单上有 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";
      }
    }
}