[英]Visibility of text box depend on value of combo box
我想根據組合框所選值的值設置文本框的可見性。 這是我的代碼:
<table width="500" align="center">
<tr>
<td><span> Name:</span></td>
<td><input name="name" type="text" id="name" size="40" class=""/></td>
</tr>
<tr>
<td><span>Email ID:</span></td>
<td><input name="email" type="email" id="email" size="40" class=""/></td>
</tr>
<tr>
<td><span>Select:</span></td>
<td>
<select id="edition">
<option value="none" selected>----Select ----</option>
<option id="1">A</option>
<option id="2">B</option>
</select>
</td>
</tr>
<tr>
<td><span>Number of Licenses</span></td>
<td><input type="text" id="licenseNo" size="5" value="30" /></td>
</tr>
</table>
如果組合框的值為B,我希望看到licenseNo
文本框。我不知道該怎么做。
使用JS添加事件監聽器:
<script type="text/javascript">
function func() {
var elem = document.getElementById("edition");
if(elem.options[elem.selectedIndex].innerHTML == "B") {
document.getElementById("licenseNo").style.display = "";
} else {
document.getElementById("licenseNo").style.display = "none";
}
}
</script>
<select id="edition" onchange="javascript:func();">
...
</select>
當頁面剛剛加載時,也不要忘記在開始時調用func()
。
您也可以像下面一樣使用它。 只需使用值即可獲取所選文本
<table width="500" align="center" >
<tr>
<td><span> Name:</span></td>
<td><input name="name" type="text" id="name" size="40" class=""/></td>
</tr>
<tr>
<td><span>Email ID:</span></td>
<td><input name="email" type="email" id="email" size="40" class=""/></td>
</tr>
<tr>
<td><span>Select:</span></td>
<td>
<select id="edition" onchange="func()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">B</option>
</select>
</td>
</tr>
<tr id ="trhide">
<td><span>Number of Licenses</span></td>
<td><input type="text" id="licenseNo" size="5" value="30" /></td>
</tr>
</table>
<script type="text/javascript">
function func() {
var elem = document.getElementById("edition");
if(elem.value == "B") {
document.getElementById("trhide").style.visibility = "visible";
} else {
document.getElementById("trhide").style.visibility = "hidden";
}
}
</script>
在這里看小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.