remove works but not hide?

Question

hello there.

creating a filter for a select menu and having a few problems!

the first one is

$("#filterContentMenu option:contains(a)").hide();

doesn't work but

$("#filterContentMenu option:contains(a)").remove();

does.

Actually this only seem to be a problem in safari! Works in firefox?

Answer 1

.hide() sets an element's display to none. You can't set an <option> to display: none, it won't work in all browsers. You can remove them and retain a reference to them, though:

var removed = $("#filterContentMenu option:contains(a)").remove();

// later that day...
removed.appendTo("#filterContentMenu");

Answer 2

"Hiding" (setting to display: none) options isn't very well supported in several browsers. It is really better to delete and recreate them.