How do I select an option by class?

Question

I tried using $('.className').show(); and $('.className').hide(); but it doesn't seem to work in IE. Is there another way to group options by class in a drop down list? I found this question but the answer is looking for the value "a" or "c".

//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;

How do I look for the actual class?

EDIT

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

I'll make this a comment as I'm not certain it'll work, but `$('#theOptions2 option').hasClass('.className').remove();` might do it. — Town, Jun 21 '11 at 13:44
Can you provide a sample of the `#theOptions2` dropdown? Do the c & a items have classes? — Rob, Jun 21 '11 at 13:44
possible duplicate of [Hide options in a select list using jQuery](http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery) — epascarello, Jun 21 '11 at 13:54

score 2 · Answer 1 · answered Jun 21 '11 at 13:44

2

I've never seen anyone try to call hide/show on option elements before, and I imagine IE just doesn't allow you to do that. The selection is probably matching just fine, but IE is not hiding the elements. The selection for removing would be the same as for calling show hide...

$('.className').remove();

or

$('option.className').remove();

or

$('#theSelect option.className').remove();

answered Jun 21 '11 at 13:44

JAAulde

19,250
5
52
63

This seems to work... but how do I add? $('className').add(); does not seem to work. – MrM Jun 21 '11 at 13:53
Well now you're working in reverse...you can append options to a SELECT via something like: `$( '' ).val( VALUE ).text( TEXT ).appendTo( '#theSelect' );` – JAAulde Jun 21 '11 at 13:56

score 1 · Answer 2 · answered Jun 21 '11 at 13:44

1

You can add the disabled attribute to the options you don't want to use:

http://jsfiddle.net/sadmicrowave/Fnvqb/

answered Jun 21 '11 at 13:44

sadmicrowave

39,964
34
108
180

+1 I like the idea of disabling as well, although the OP may not like that the options still visibly show. – JAAulde Jun 21 '11 at 13:46
Yea, I saw he was trying to use .remove() which indicated that he wanted to actually REMOVE the item from the list. I just thought this would be a less intrusive idea than deleting DOM elements ( I don't like deleting DOM elements unless I absolutely have to ). – sadmicrowave Jun 21 '11 at 13:50

score 0 · Answer 3 · answered Jun 21 '11 at 13:54

$('select[class~="cactus"]')
$('option[class~="cactus"]')

javascript:(function(){    
    var out = "hi\n";
    out += $('*[class~="cactus"]').html2string()  ;
    alert( out );
})()

For future reference, instead of describing in words the html ... show actual html

BenAlabaster · Answer 4 · 2011-06-21T15:07:28.070

This demonstration code shows one way of how you can achieve option filtering... it would need modification to determine which candidate items are removed as I just hardcoded for purpose of demonstration, but it shows you what you need to consider - when you remove the items, you need to consider the ordering by which they're added back. The easiest way to bypass this problem is to keep a copy of the original list and then when you unfilter, just remove the remaining items, replacing them with what was originally there - otherwise you have to worry about keeping sort data.

So here's my drop down definition:

<select id="mySelector">
  <option class="group1">Item 1</option>
  <option class="group2">Item 2</option>
  <option class="group1">Item 3</option>
  <option class="group2">Item 4</option>
  <option class="group1">Item 5</option>
</select>

<input type="button" id="removeItems" value="Remove candidate items" />
<input type="button" id="addItems" value="Add them back" />

And the jquery to filter/restore the items:

$(function () {

    var originalOptionData;

    $("#removeItems").bind('click', function () {
        /* store original copy for rollback */
        originalOptionData = $("#mySelector option");
        $("#mySelector option.group2").remove();
    });

    $("#addItems").bind('click', function () {
        var selector = $("#mySelector");
        selector.children().remove();
        selector.append(originalOptionData);
    });
});

This could be turned into a select filter jquery plugin relatively simply I suppose, but I didn't go that far...

How do I select an option by class?

4 Answers4