Javascript para mostrar el div oculto cuando se selecciona la opción de la lista desplegable

Question

Tengo 5 listas desplegables en un Formulario, debajo del cual tengo elementos DIV que requieren la entrada del usuario. Muestro el primer DIV para la primera lista desplegable y oculto todas las demás formas usando style = "display: none;".

Estoy buscando un Javascript que muestre el segundo DIV cuando selecciono cualquier opción de la 2da lista desplegable.

Cualquier ayuda sería apreciada.

Gracias de antemano, Ryan Smith

<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

Aquí es un ejemplo - añadí el mismo ID que el nombre a la selecciona

http://jsfiddle.net/mplungjan/32Ukf/

Llanura 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

que cambiaría su margen de beneficio un poco ajustando el value de la opción de la ID del div desea mostrar. El siguiente código debe ayudarlo a avanzar en la dirección correcta.

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

Entonces manejarlo con este método:

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

Aquí es a working fiddle.