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

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