$ ("# id option"). hide (); doesn't work on safari / chrome?

The same for:

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


I'm just surprised. I thought something went wrong with my code. I tried this with pure html:

<select id = "name">



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



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

Is there a replacement ?!

EDIT: I need to hide / show a variant (or some of them) from a list in a list.


source to share

5 answers

To hide:

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


To show:

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


In contrast .remove()

, .detach()

stores all jQuery data associated with deleted elements.



With standard selection, I don't think there is any cross-browser way to hide the selection.

You can find a custom select control or you can store the complete list of items in a partial variable and remove / add items from the list that you need.



Hmmm. There may be an implementation problem ...

Maybe try

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


if you need to retain some knowledge of what has been removed, then load it into a variable before you start.

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


you can use the index to add it back:

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




This will work on safari

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




You haven't selected jQuery in the fiddle. Either way, you need to install selectedIndex

from <select>

to -1

in order to clear the currently selected option: http://jsfiddle.net/kgLkt/2/ .

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




All Articles