$ ("# 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.
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;
console.dir(select[0].options);
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);