javascript 如何从选择列表中删除/隐藏选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17652618/
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
How to remove/hide select options from select-list
提问by user2132234
I've got a select list like this:
我有一个这样的选择列表：
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
</select>
Unfortunately I can't edit it. Is there any method which let me hide the "Product 4" option by default? I'm trying with CSS, but it doesn't work with IE.
不幸的是我无法编辑它。有什么方法可以让我默认隐藏“产品 4”选项？我正在尝试使用 CSS，但它不适用于 IE。
回答by walterquez
To hide it, wrap it with a span tag.
要隐藏它，请用 span 标签包裹它。
$( "#selectlist option[value=4]" ).wrap( "<span>" );
To show it, unwrap the span tag if it has one.
要显示它，请打开 span 标签（如果有）。
if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
$( "#selectlist option[value=4]" ).unwrap();
}
回答by Arun P Johny
using css to hide options is not supported in IE, so you need to update the options list itself.
IE 不支持使用 css 隐藏选项，因此您需要更新options 列表本身。
Try something like
尝试类似
$('#selectlist option[value=4]').remove();
Demo: Fiddle
演示：小提琴
or if you want to enable it later
或者如果您想稍后启用它
var sel = $('#selectlist');
var opts = sel.find('option');
$(':checkbox').click(function(){
sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()
Demo: Fiddle
演示：小提琴
回答by sandeepghuge141
You can hide option using following line include in scripting.
您可以使用以下行包含在脚本中隐藏选项。
$("#selectlist option[value='4']").hide();
And if you want to again show this option use following line.
如果您想再次显示此选项，请使用以下行。
$("#selectlist option[value='4']").show();
回答by johnnyman
To save your time, please read the following answer.
为了节省您的时间，请阅读以下答案。
OK, I searched for a few hours and I noticed that there is NO WORKING WAYto "hide" (what I mean is make the option temporally disappeared from the drop-down list) for all browsers, such as set the visibility to be hidden or style="display: none".
好的，我搜索了几个小时，我注意到所有浏览器都没有“隐藏”的工作方式（我的意思是让选项暂时从下拉列表中消失），例如将可见性设置为隐藏或样式=“显示：无”。
My final approach is: 1. Create an array to store all the options for the dropdown list. 2. Use a method to dynamically update the drop-down list according what you want to be shown.
我最后的方法是： 1. 创建一个数组来存储下拉列表的所有选项。2.使用一种方法根据您想要显示的内容动态更新下拉列表。
That's it, if you want to use a drop down list without using any library
就是这样，如果您想使用下拉列表而不使用任何库
回答by RobG
You can "hide" the option by moving it to a hidden select element or cached document fragment, then move it back when you want to show it:
您可以通过将选项移动到隐藏的选择元素或缓存的文档片段来“隐藏”该选项，然后在您想要显示它时将其移回：
var selectTool = (function() {
var frag = document.createDocumentFragment();
return {
hideOpt: function (selectId, optIndex) {
var sel = document.getElementById(selectId);
var opt = sel && sel[optIndex];
console.log(opt);
if (opt) {
frag.appendChild(opt);
}
},
showOpt: function (selectId) {
var sel = document.getElementById(selectId);
var opt = frag.firstChild;
if (sel && opt) {
sel.appendChild(opt);
}
}
}
}());
Then you can hide the 4th option like:
然后你可以隐藏第四个选项，如：
<input type="button" value="Hide option" onclick="
selectTool.hideOpt('selectlist',4);
">
and show it again using:
并使用：
<input type="button" value="Show option" onclick="
selectTool.showOpt('selectlist');
">
All play code of course, but you should get some ideas. If you want to store many options, you'll need a way of referencing them so maybe store them in an object with some form of referencing scheme.
当然，所有播放代码，但你应该得到一些想法。如果要存储许多选项，则需要一种引用它们的方法，因此可以将它们存储在具有某种引用方案形式的对象中。
回答by sandeep kumar
if you want to remove some option from select list you can use this code:
如果要从选择列表中删除某些选项，可以使用以下代码：
<script type="text/javascript">
$(window).bind("load", function() {
$('#select_list_id option[value="AB"],option[value="SK"]').remove();
});
</script>
回答by sandeepghuge141
to append the child below the list of option using java script.
使用java脚本将子项附加到选项列表下方。
`var option = document.createElement("option");
option.text = "All Users";
option.value = "all_user";
var select = document.getElementById("log_user_type");
select.appendChild(option);`
回答by sandeepghuge141
see this link
看到这个链接
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4" id="i">Product 4</option>
</select>
#i{display:none;}
create an id and in style make it invisble
创建一个 id 并在样式中使其不可见
回答by sla55er
I suppose you are using JQuery as well.
我想你也在使用 JQuery。
$("#selectlist option[value='option4']").remove();
回答by Chirag Vidani
Try to disable that option with disabled attribute.
尝试使用 disabled 属性禁用该选项。
<select id="selectlist" name="selectproduct" >
<option value=""> --- Select product --- </option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4" disabled="disabled">Product 4</option>
</select>
Check demo
检查演示
