Hide options in a select list using jQuery

jquery html-select
hitfactory picture hitfactory · Aug 13, 2009 · Viewed 358.3k times · Source

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

chaos picture chaos · Aug 13, 2009

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.

Related questions

Set select option 'selected', by value

I have a select field with some options in it. Now I need to select one of those options with jQuery. But how can I do that when I only know the value of the option that must be selected? …

Read More
Change the selected value of a drop-down list with jQuery

I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery. Using regular JavaScript, I would do something like: ddl = document.getElementById("…

Read More
Adding options to a <select> using jQuery?

What's the easiest way to add an option to a dropdown using jQuery? Will this work? $("#mySelect").append('<option value=1>My option</option>');

Read More