Hide options in a select list using jQuery

Question

I have an object with key/value pairs of options I want to hide/remove from a select list. Neither of the following option selectors work. What am I missing?

$.each(results['hide'], function(name, title) {                        $("#edit-field-service-sub-cat-value option[value=title]").hide();   $("#edit-field-service-sub-cat-value option[@value=title]").hide(); });  

Answer 1

For what it's worth, the second form (with the @) doesn't exist in jQuery 1.3. The first isn't working because you're apparently expecting variable interpolation. Try this:

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide(); 

Note that this will probably break in various hideous ways if title contains jQuery selector metacharacters.

Answer 2

You cannot do this x-browser. If I recall ie has issues. The easiest thing to do is keep a cloned copy of the select before you remove items, this allows you to easily remove and then append the missing items back.