Javascript, чтобы показать скрытый div, когда опция выбрана из выпадающего списка - PullRequest
Новая
       46

Javascript, чтобы показать скрытый div, когда опция выбрана из выпадающего списка

5 голосов
/ 19 ноября 2011

У меня есть 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>

Ответы [ 2 ]

1 голос
/ 19 ноября 2011

Вот пример - я добавил тот же идентификатор, что и имя, к выбору

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";
      }
    }
}
1 голос
/ 19 ноября 2011

Я бы немного изменил вашу разметку, установив value опции на ID из div, который вы хотите отобразить.Код ниже должен привести вас в правильном направлении. 

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

Вот рабочая скрипка .

...