Same for:

$("#id option").show();

I'm just surprised. I thought that something went wrong with my code. I tried it with a blank html:

<select id = "name">
  <option>1</option>
  <option>2</option>
</select>

Javascript:

​$("#name option").hide();​

/

It works like a charm with firefox, but not on safari nor chrome!

Is there a substitute?!

EDIT: I need to hide/show the option (or some of them) from appearing in the list.

Same for:

$("#id option").show();

I'm just surprised. I thought that something went wrong with my code. I tried it with a blank html:

<select id = "name">
  <option>1</option>
  <option>2</option>
</select>

Javascript:

​$("#name option").hide();​

http://jsfiddle/kgLkt/

It works like a charm with firefox, but not on safari nor chrome!

Is there a substitute?!

EDIT: I need to hide/show the option (or some of them) from appearing in the list.

• javascript
• jquery
• forms
• safari

• Try using a a class instead of id. – C0D3 Commented Mar 21, 2012 at 21:22
• I'm just curios what exactly are you trying to acplish? Why not just hide the select element? I would actually say that the WebKit browsers are doing nothing wrong. And please, please, it's JavaScript not Java. – Daff Commented Mar 21, 2012 at 21:23
• Your jsfiddle link is broken. Make sure to click "save" before copying the link. – gilly3 Commented Mar 21, 2012 at 21:26
• @Daff I'm trying to make an interactive application in which the user will filter his selections based on former choices. After working and testing on firefox I was shocked it did't work on webkit browsers even though it's basic jQuery. I thought I might be missing something. – Khaled Mahmoud Commented Mar 21, 2012 at 21:32
• 1 @KhaledMahmoud Then I actually think that Diegos solution works best. It would probably make even more sense to keep the list as a JavaScript array or object that you filter and render into the select element afterwards. – Daff Commented Mar 21, 2012 at 23:18

5 Answers 5

To hide:

var myOpts = $("#id option").detach();

To show:

$("#id option").append(myOpts);

As opposed to .remove(), .detach() keeps all jQuery data associated with the removed elements.

With the standard select I don't think there is any cross browser way to hide a select option.

You could look for a custom select control or you could keep the full list of items on a separated variable and remove / add items from the select as you need.

Hmmm. Could be an implementation issue...

Perhaps try

$("#name option").remove();

if you need to maintain some knowledge of what has been removed then load them into a variable before hand.

var $opts = $("#name option");

you could then use index to add them back in:

$("#name").append( $opts.eq(n) );

You didn't select jQuery in the fiddle. Anyhow, you need to set selectedIndex of the <select> to -1 to clear the currently selected option: http://jsfiddle/kgLkt/2/.

$("#name option").hide().parent().prop("selectedIndex", -1);​​​​​​

This will work on safari

   var select = $('#name');
    var diff = 0;
    console.dir(select[0].options);
    select.find('option').each(function(x) {
        select[0].options[x+diff] = null;
        diff -= 1;
    });