选中后，隐藏下拉选项框消失。
选中后，隐藏下拉选项框消失。
提问于 2016-06-17 19:17:37
请原谅，我是这里的新会员。我似乎无法使代码正常工作。select选项允许各种大小的选择。如果选择了自定义大小，则会出现隐藏下拉选项框.这里的问题是，一旦选择了下拉选项框，它就消失了。几个月来我一直在想办法解决这个问题。希望外面有人能帮我。我的预付款谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Show Hide Using Select Box</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "customsize") {
$(".customsize").show();
} else {
$(".box").hide();
}
});
}).change();
});
</script>
</head>
<body>
<div>
<select name="product[]" style="display: block; width: 256px; border-color: rgb(204, 204, 204); font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.9em; padding: 0.3em;">
<option>Select Size</option>
<option style="box-sizing: border-box;" value="30">Chest 30in</option>
<option style="box-sizing: border-box;" value="32">Chest 32in</option>
<option style="box-sizing: border-box;" value="34">Chest 34in</option>
<option style="box-sizing: border-box;" value="36">Chest 36in</option>
<option style="box-sizing: border-box;" value="38">Chest 38in</option>
<option style="box-sizing: border-box;" value="40">Chest 40in</option>
<option value="customsize">Custom Size*</option>
</select><br />
</div>
<div class="customsize box">
<select name="product[]" style="display: block; width: 256px; border-color: #cccccc; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 0.9em; padding: 0.3em;">
<option style="box-sizing: border-box;" value=" ">Body Length (in)</option>
<option style="box-sizing: border-box;" value="30">30</option>
<option style="box-sizing: border-box;" value="31">31</option>
<option style="box-sizing: border-box;" value="32">32</option>
<option style="box-sizing: border-box;" value="33">33</option>
<option style="box-sizing: border-box;" value="34">34</option>
<option style="box-sizing: border-box;" value="35">35</option>
<option style="box-sizing: border-box;" value="36">36</option>
<option style="box-sizing: border-box;" value="37">37</option>
<option style="box-sizing: border-box;" value="38">38</option>
<option style="box-sizing: border-box;" value="39">39</option>
<option style="box-sizing: border-box;" value="40">40</option>
</select><br />
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-17 19:24:59
使用select选择器选择两个jQuery元素。相反，给顶层<select>一个id="pick_size"。然后在您的jQuery中，将$("select")更改为$("#pick_size")，这样就可以了。
这是一个工作小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37888895
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号