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

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";
      }
    }
}

Answer 2

我会通过将选项的 value 设置为您要显示的 div 的 ID 来稍微更改您的标记。下面的代码应该可以帮助您朝着正确的方向前进。

<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)"> 
    <option value="lege1">Show lege1</option>
</select>

然后用这个方法处理它：

function ToggleDiv(id)
{
    document.getElementById(id).style.display = "block";
}

这是一个工作小提琴。