CODEWITHSUNDEEP
javascriptjqueryhtml-select
MrM
MrM

Reputation: 22009

How do I select an option by class?

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>

Upvotes: 0

Views: 3840

Answers (4)

BenAlabaster
BenAlabaster

Reputation: 39874

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...

Upvotes: 0

mozrepl
mozrepl

Reputation: 1

$('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

Upvotes: 0

JAAulde
JAAulde

Reputation: 19560

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();

Upvotes: 2

sadmicrowave
sadmicrowave

Reputation: 40972

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

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

Upvotes: 1

Related Questions