隐藏/显示在jQuery中的选择框选项？
[英]Hiding/showing the select box options in jquery?
问题描述
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". 在单击某些按钮时，我要隐藏ID为“ action1”的选项，并显示ID为“ action2”的选项。 So i tried this 所以我尝试了这个
$('#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(ie with ids action1/action2 ) above options. 在萤火虫中，当我尝试检查选择框时，未在选项上方找到任何div标签（即，具有ids action1 / action2的ID）。
5 个解决方案
解决方案1
3 已采纳 2013-01-04 11:47:13
Use below javascript function where showOptionsClass is the class given to each option you want to show. 使用以下javascript函数，其中showOptionsClass是赋予您要显示的每个选项的类。 This will work in cross browser. 这将在跨浏览器中工作。
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');
}
解决方案2
2 2013-01-03 06:52:21
You may not have <div> elements within a <select> , see for example this stackoverflow on the topic , which references this bit of 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 id attribute is required then maybe even adjusting the innerHtml (yuck...). 此外，隐藏选项与跨浏览器不兼容（请参阅此stackoverflow（第二个答案）） ，如@Voitek Zylinski所建议的，最好保留多个select副本并在它们之间切换，或者保持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! 虽然不完全理想！
解决方案3
1 2013-01-03 06:38:53
You can not use div to group but you can assign class to options to group them. 您不能使用div进行分组，但可以将class分配给options以对其进行分组。
<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();
解决方案4
0 2013-01-03 06:37:46
You can't group options inside a div. 您不能在div中对选项进行分组。 You can group them inside an < optgroup >, but I don't think that's what you're aiming for. 您可以将它们分组到< optgroup >中，但是我认为这不是您要的目标。
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options. 相反，您应该创建两个可以在它们之间切换的下拉菜单，或者保留一个下拉菜单并重新填充其选项。
解决方案5
0 2013-01-03 07:23:50
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.