从下拉列表中选择选项时显示隐藏div的Javascript
我在表单上有5个下拉列表,其中有需要用户输入的DIV元素。我显示第一个下拉列表的第一个DIV,并使用style=“display:none;”隐藏所有其他表单 我正在寻找一个Javascript,当我从第二个下拉列表中选择任何选项时,它将显示第二个DIV 任何协助都将不胜感激 提前感谢,, 瑞安·史密斯从下拉列表中选择选项时显示隐藏div的Javascript,javascript,select,html,drop-down-menu,hidden,Javascript,Select,Html,Drop Down Menu,Hidden,我在表单上有5个下拉列表,其中有需要用户输入的DIV元素。我显示第一个下拉列表的第一个DIV,并使用style=“display:none;”隐藏所有其他表单 我正在寻找一个Javascript,当我从第二个下拉列表中选择任何选项时,它将显示第二个DIV 任何协助都将不胜感激 提前感谢,, 瑞安·史密斯 <tr> <td>Destination 1</td><td>Destination 2</td><td>Destina
<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>
目的地1目的地2目的地3目的地4目的地5
0
1.
到达下降1
出发降落1
到达下降2
出发降落2
到达下降3
出发降落3
到达下降4
出发降落4
到达时放下5
出发降落5
通过将选项的值设置为要显示的div的ID
,我会稍微更改您的标记。下面的代码应该会让您朝着正确的方向前进
<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value="lege1">Show lege1</option>
</select>
这里是。这里是一个示例-我将与名称相同的ID添加到选择中
普通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";
}
}
}
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";
}
}
}