用于隐藏下拉列表选项的Javascript解决方案

Question

编辑:谢谢大家，但似乎什么都没有用。我正在将此代码插入到我知道正在使用的文件中，该文件包含其他通常格式化的javascript块，但这仍然不起作用。它在小提琴中起作用，但对我的代码不起作用。我想这对于我试图修改的平台和扩展来说太特殊了(这是由第三方扩展修改的Magento签出步骤的一部分)。我将开始研究用手动生成的列表替换列表。再次感谢。

我试图在下拉列表中隐藏一个选项，这个下拉列表是以二进制方式生成的。CSS解决方案并不适用于所有浏览器，尽管我在这里发现了几个类似的问题，但这两个问题都没有提供适合我的解决方案。

下面是我的列表呈现的内容：

<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> 

例如，我需要隐藏值"12“的选项。我正在使用这个JS：

$("#timeselect option[value='12']").remove();

任何建议都会非常感谢，因为我是新来的JS。

谢谢。

Answer 1

使用hide()函数JQuery：jsFiddle

你可以用show()把它拿回来

Answer 2

按值删除Jquery

$("#timeselect option[value=11]").remove();

Jquery按文本删除

$("#timeselect option:contains(11)").remove();

Jquery使用css隐藏带有其值的选择框选项。

   $("#timeselect option[value='11']").hide();

或

   $("#timeselect option[value='11']").css('display','none');

Answer 3

我尝试了许多不同的方法，但是这个解决方案似乎是合理的，并且跨浏览器兼容，并且我已经在我的代码中使用了。没有插件需要使用jquery对象的简单注册函数。

解决方案一目了然：

(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);

以下是完整的实现http://jsfiddle.net/8uxD7/3/