当从下拉列表中选择选项时，显示隐藏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"; 
     } 
    } 
} 

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

这里的a working fiddle。