當從下拉列表中選擇選項時，顯示隱藏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。