我需要几个复选框,当每个复选框选中时,都有自己的下拉菜单。
但是,当单击多个按钮时,会显示一个完全不同的下拉列表。
例如:
选中时的Checkbox1显示下拉列表1选中时的Checkbox1显示下拉列表2
选中Checkbox1和Checkbox2时显示dropdown3
到目前为止,我已经拥有Checkbox1(在选中时显示了dropdown1)和Checkbox2(选中时显示了dropdown2)。
和
当同时选中Checkbox1和Checkbox2时,显示dropdown3
但是我尝试编码的两种方式仍然继续显示dropdown1和dropdown3 <==主要问题
function showSelect() {
var d = document.getElementById("dropdown1");
if (document.getElementById("checkbox1").checked) {
d.style.display = "block";
} else {
d.style.display = "none";
d.selectedIndex = 0;
}
var d = document.getElementById("dropdown2");
if (document.getElementById("checkbox2").checked) {
d.style.display = "block";
} else {
d.style.display = "none";
d.selectedIndex = 0;
}
}
$("#checkbox1, #checkbox2").click(function() {
if ($("#checkbox1").is(':checked') == true && $("#checkbox2").is(':checked') == true) {
$("#dropdown3").removeAttr("style");
$("#dropdown1").attr("style");
$("#dropdown2").attr("style");
} else {
$("#dropdown3").attr("style", "display:none");
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1" onclick="showSelect()">checkbox1
<br>
<input type="checkbox" id="checkbox2" onclick="showSelect()">checkbox2
<br>
<div id="dropdown1" style="display:none">
<select id="myselect">
<option value="">-- Budget --</option>
<option value="A">up to $1000</option>
<option value="B">$1000-$1500</option>
<option value="C">$1500-$2000</option>
<option value="D">$2000 and up</option>
</select>
</div>
<div id="dropdown2" style="display:none">
<select id="myselect">
<!-- SEO Options -->
<option value="Y">-- Monthly Budget --</option>
<option value="K">up to $500</option>
<option value="L">$500-$1500</option>
<option value="M">$1500-$3000</option>
<option value="N">$3000-$5000</option>
<option value="O">$5000-$10,000</option>
<option value="P">$10,000 and up</option>
</select>
</div>
<div id="dropdown3" style="display:none">
<select id="myselect">
<!-- SEO Options -->
<option value="Y">-- NEW --</option>
<option value="K">up to $500</option>
<option value="L">$500-$1500</option>
<option value="M">$1500-$3000</option>
<option value="N">$3000-$5000</option>
<option value="O">$5000-$10,000</option>
<option value="P">$10,000 and up</option>
</select>
</div>
</body>
</html>
由于看起来您正在使用jQuery,因此可以删除onclick
复选框的属性,并像这样进行操作:
$(document).ready(function () {
$("#checkbox1, #checkbox2").click(function () {
var check1 = $("#checkbox1").is(":checked");
var check2 = $("#checkbox2").is(":checked");
$("#dropdown1").hide();
$("#dropdown2").hide();
$("#dropdown3").hide();
if (check1 && check2) {
$("#dropdown3").show();
}
else if (check1) {
$("#dropdown1").show();
}
else if (check2) {
$("#dropdown2").show();
}
});
});
请参阅小提琴:http : //jsfiddle.net/4sw6xmpa/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句