ドロップダウンリストからオプションが選択されたときに非表示のdivを表示するJavascript

Question

フォームに5つのドロップダウンリストがあり、その下にユーザー入力を必要とするDIV要素があります。最初のドロップダウンリストの最初のDIVを表示し、style = "display：none;"を使用して他のすべてのフォームを非表示にします。

2番目のドロップダウンリストからオプションを選択すると、2番目のDIVを表示するJavascriptを探しています。

ご協力いただければ幸いです。事前に

おかげで、 ライアンスミス

<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

は一例である - 私は選択

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

に名前と同じIDを追加しました

Answer 2

は、私はあなたが表示したいdivのIDにオプションのvalueを設定することにより、ビット、あなたのマークアップを変更します。下のコードは正しい方向に進むはずです。

<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です。ここ