javascript 在 jquery 中隐藏/显示选择框选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14134119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding/showing the select box options in jquery?
提问by emilly
i have below code snippet in jsp
我在jsp中有以下代码片段
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
单击某个按钮时，我想隐藏 ID 为“action1”的选项并显示 ID 为“action2”的选项。所以我试过这个
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e with ids action1/action2 ) above options.
但这没有用。没有得到什么问题？在 firebug 中，当我尝试检查选择框时，我没有在选项上方找到任何 div 标签（即带有 ids action1/action2）。
采纳答案by M Sach
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will work in cross browser.
使用下面的 javascript 函数，其中 showOptionsClass 是您要显示的每个选项的类。这将适用于跨浏览器。
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
回答by kieran
You may not have <div>elements within a <select>, see for example this stackoverflow on the topic, which references this bitof the HTML spec.
您可能没有<div>元素内的<select>，例如参见有关该主题的计算器，它引用此位HTML规范的。
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as @Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the idattribute is required then maybe even adjusting the innerHtml (yuck...).
此外，隐藏选项不是跨浏览器兼容的（请参阅此 stackoverflow（第二个答案）），正如@Voitek Zylinski 所建议的，您最好保留多个选择副本并在它们之间切换，或者如果id需要保留该属性然后甚至可能调整innerHtml（哎呀......）。
You could maybe approach it like:
你也许可以像这样处理它：
markup
标记
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();??
See for example this jsfiddle
参见例如这个 jsfiddle
Not exactly ideal though!
虽然不完全理想！
回答by Adil
You can not use divto group but you can assign classto optionsto group them.
您不能使用divto 分组，但可以分配classtooptions对它们进行分组。
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>?
$('.action1').hide();
$('.action2').show();?
回答by Ahmed Assaf
You can try this code :
你可以试试这个代码：
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>?
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
回答by Wojciech Zylinski
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
您不能在 div 内对选项进行分组。您可以将它们分组在 < optgroup> 中，但我认为这不是您的目标。
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
相反，您应该做的是创建两个下拉列表，您可以在它们之间切换，或者保留一个下拉列表并重新填充其选项。
