Javascript solution for hiding dropdown list options

Question

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.

---

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.

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:

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

Any advice would be greatly appreciated since I'm new to JS.

Thanks.

Answer 1

Use the hide() function of JQuery: jsFiddle

You can use show() to get it back

Answer 2

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

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/

Answer 3

Jquery remove by value

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

Jquery remove by Text

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

Jquery to hide a select box option with its value using css

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

or

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

Answer 4

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

$("#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

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