[英]Show multiple fields based on dropdown
我試圖基於指定'other'的下拉菜單顯示/隱藏字段，但是僅顯示第一個元素，如何使所有帶有li id =“ osother”的字段出現？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Selectbox</title>
<style type="text/css">
#osother{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="otheros"){
$("#osother").hide();
$("#osother").show();
}
});
}).change();
});
</script>
</head>
<body>
<li>
<p>Operating System: <Select Class="selectmenu" id="whatever" name="OS" onchange="markDirty();" required>
<option value = "">-- Select an Option --</option>
<option value = "Win">Windows</option>
<option value = "ios">iOS</option>
<option value = "otheros">Other</option>
</select>
</p></li>
<li id="osother">
Please Specify: <label id="oslabel"><input name="Other OS" type="text" placeholder="Other OS" size="50" /></label></li>
<li id="osother">
Version: <label id="version"><input name="OSV" type="text" placeholder="OS Version" size="50" /></label></li>
</body>
</html>
您在這里有一些錯誤：
您需要將您的li封裝在ul內
id必須是唯一的-假定它是唯一的，選擇器將僅在第一個元素上返回，您應該使用例如class，從而允許您在同一分組中選擇多個元素
在您的HTML中，大寫的Class和Select應當大寫。
的HTML
<ul>
<li>
<p>Operating System:
<select class="selectmenu" id="whatever" name="OS" onchange="markDirty();" required='required'></select>
</p>
</li>
<li class="osother">Please Specify:
<label id="oslabel">
<input name="Other OS" type="text" placeholder="Other OS" size="50" />
</label>
</li>
<li class="osother">Version:
<label id="version">
<input name="OSV" type="text" placeholder="OS Version" size="50" />
</label>
</li>
</ul>
JS
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "otheros") {
$(".osother").show();
}
});
}).change();
});
您只能在文檔中使用一次ID，因此您必須將#osother更改為.osother 。 當下拉列表的值從osother更改時，字段也應該隱藏。
JSFiddle在這里。
的HTML
<ul>
<li>
<p>Operating System:
<Select Class="selectmenu" id="whatever" name="OS" onchange="markDirty();" required>
<option value="">-- Select an Option --</option>
<option value="Win">Windows</option>
<option value="ios">iOS</option>
<option value="otheros">Other</option>
</select>
</p>
</li>
<li class="osother">Please Specify:
<label id="oslabel">
<input name="Other OS" type="text" placeholder="Other OS" size="50" />
</label>
</li>
<li class="osother">Version:
<label id="version">
<input name="OSV" type="text" placeholder="OS Version" size="50" />
</label>
</li>
</ul>
JS
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "otheros") {
$(".osother").show();
} else {
$(".osother").hide();
}
});
}).change();
});
的CSS
.osother {
display:none;
}
根據下拉菜單顯示多個字段-當其他下拉菜單在頁面上時不起作用
[英]Show multiple fields based on dropdown - doesn't work when other dropdowns are on page
根據選擇下拉列表顯示或隱藏多個字段 - jquery
[英]Displaying or hiding multiple fields based on selection dropdown - jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.