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

Take a look at this question and the answers -

Disable select options...

Looking at your code, you may need to quote the attribute value

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

from jQuery attribute selectors

Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]"

EDIT:

Just realised that you're getting the title from the function parameter, in which case the syntax should be

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

Answer 2

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 3

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.

Answer 4

Hi All, I was trying to hide options from one select-list based on the selected option from another select-list. It was working in FF3 but not in IE6. I got some ideas here and have a solution now, so I would like to share:

The JavaScript

function change_fruit(seldd) {     
  var look_for_id=''; var opt_id='';
  $('#obj_id').html("");
  $("#obj_id").append("<option value='0'>-Select Fruit-</option>");
  if(seldd.value=='0') { look_for_id='N'; }   
  if(seldd.value=='1'){ look_for_id='Y';  opt_id='a'; }  
  if(seldd.value=='2'){ look_for_id='Y';  opt_id='b'; }  
  if(seldd.value=='3'){ look_for_id='Y';  opt_id='c'; }

  if(look_for_id=='Y') {
    $("#obj_id_all option[id='"+opt_id+"']").each(function() {
      $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
    });
  } else {
    $("#obj_id_all option").each(function() {
      $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
    });
  }  
}

The HTML

<select name="obj_id" id="obj_id">
 <option value="0">-Select Fruit-</option>
 <option value="1" id="a">apple1</option>
 <option value="2" id="a">apple2</option>
 <option value="3" id="a">apple3</option>
 <option value="4" id="b">banana1</option>
 <option value="5" id="b">banana2</option>
 <option value="6" id="b">banana3</option>
 <option value="7" id="c">Clove1</option>
 <option value="8" id="c">Clove2</option>
 <option value="9" id="c">Clove3</option>
</select>

<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
 <option value="0">All</option>
 <option value="1">Starts with A</option>
 <option value="2">Starts with B</option>
 <option value="3">Starts with C</option>
</select>    

<select name="obj_id_all" id="obj_id_all" style="display:none;">
 <option value="1" id="a">apple1</option>
 <option value="2" id="a">apple2</option>
 <option value="3" id="a">apple3</option>
 <option value="4" id="b">banana1</option>
 <option value="5" id="b">banana2</option>
 <option value="6" id="b">banana3</option>
 <option value="7" id="c">Clove1</option>
 <option value="8" id="c">Clove2</option>
 <option value="9" id="c">Clove3</option>    
</select>

checked as working in FF3 and IE6.