Clever Geek Handbook

$ ("# 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">
  <option>1</option>
  <option>2</option>
</select>

JavaScript:

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

http://jsfiddle.net/kgLkt/

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.

+3


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.

+13


source


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.

0


source


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


source


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;
    });
-1


source


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);​​​​​​
-1


source






More articles:


All Articles