jQuery 用于隐藏下拉列表选项的 Javascript 解决方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18300803/
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
Javascript solution for hiding dropdown list options
提问by Palmer Del Campo
Edit: Thanks everybody, but nothing seems to work. I am inserting this code in a file that I know is being used and that contains other javascript blocks normally formatted, and this still doesn't work. It works in a fiddle, but not on my code. I guess this is too specific to the platform and extension that I'm trying to modify (this is part of a Magento checkout step modified by a third party extension). I will start looking into replacing the list with a manually generated one. Thanks again.
编辑：谢谢大家，但似乎没有任何效果。我将此代码插入到我知道正在使用的文件中，该文件包含其他通常格式化的 javascript 块，但这仍然不起作用。它适用于小提琴，但不适用于我的代码。我想这对于我要修改的平台和扩展程序来说太具体了（这是由第三方扩展程序修改的 Magento 结帐步骤的一部分）。我将开始研究用手动生成的列表替换列表。再次感谢。
I am trying to hide an option in a dropdown list that is dinamically generated. The CSS solution doesn't work on all browsers, and even though I have found several similar questions here, neither one offers a solution that works for me.
我试图在动态生成的下拉列表中隐藏一个选项。CSS 解决方案并不适用于所有浏览器，即使我在这里发现了几个类似的问题，但没有一个提供适合我的解决方案。
Here's what my list renders like:
这是我的列表呈现的样子：
<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option>
<option id="option-11" value="11" >11</option>
<option id="option-12" value="12" >12</option>
<option id="option-13" value="13" >13</option>
<option id="option-14" value="14" >14</option>
<option id="option-15" value="15" >15</option>
<option id="option-16" value="16" >16</option>
<option id="option-17" value="17" >17</option>
<option id="option-18" value="18" >18</option>
<option id="option-19" value="19" >19</option>
<option id="option-20" value="20" >20</option>
</select>
I need to hide the option with value "12" for example. I am using this JS:
例如，我需要隐藏值为“12”的选项。我正在使用这个JS：
$("#timeselect option[value='12']").remove();
Any advice would be greatly appreciated since I'm new to JS.
任何建议将不胜感激，因为我是 JS 新手。
Thanks.
谢谢。
回答by Joren
回答by kinnu
I tried in many different ways but this solution seems reasonable and cross browser compatible and I have used in my code. No plugins required simple register function with jquery object
我尝试了许多不同的方法，但这个解决方案似乎合理且跨浏览器兼容，我已在我的代码中使用。没有插件需要使用 jquery 对象的简单注册功能
Solution at glance:
解决方案一目了然：
(function ($) {
$('#showOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', true);
});
$('#hideOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', false);
});
$.fn.showHideDropdownOptions = function(value, canShowOption) {
$(this).find('option[value="' + value + '"]').map(function () {
return $(this).parent('span').length === 0 ? this : null;
}).wrap('<span>').hide();
if (canShowOption)
$(this).find('option[value="' + value + '"]').unwrap().show();
else
$(this).find('option[value="' + value + '"]').hide();
}
})(jQuery);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/
这是完整的实现http://jsfiddle.net/8uxD7/3/
回答by PRAH
You can use jQuery remove() function. if you want to remove it permanently from DOM, or if you want to remove and reinsert it use detach()
您可以使用 jQuery remove() 函数。如果您想从 DOM 中永久删除它，或者如果您想删除并重新插入它，请使用 detach()
$("#timeselect option[value='12']").remove();
Or Detach
或分离
var value = $("#timeselect option[value='12']").detach();
And reinsert it by using
并通过使用重新插入它
$("#timeselect").append(value);
http://jsbin.com/iHIrAQE/5/edit
http://jsbin.com/iHIrAQE/5/edit
See the example
看例子
Another way is you can disable the value so user can see but cannot select
另一种方法是您可以禁用该值，以便用户可以看到但不能选择
$("#timeselect option[value='12']").attr('disabled','disabled');
回答by Amith
Jquery remove by value
Jquery 按值删除
$("#timeselect option[value=11]").remove();
Jquery remove by Text
Jquery 按文本删除
$("#timeselect option:contains(11)").remove();
Jqueryto hide a select box option with its value using css
Jquery使用 css 隐藏选择框选项及其值
$("#timeselect option[value='11']").hide();
or
或者
$("#timeselect option[value='11']").css('display','none');
