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

我会通过将选项的value设置为您要显示的ID的{{1}}来稍微更改标记。下面的代码可以让你朝着正确的方向前进。

div

然后用这种方法处理它：

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

这是a working fiddle。

Answer 2

这是一个例子 - 我在名称中添加了与名称相同的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";
      }
    }
}

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

2 个答案: