12

I am using a multiselect with options grouped together.

<select title="Fruits" multiple="multiple" id="fruits" name="fruits[]">
    <option selected="selected" label="All" value="">All</option>
    <optgroup label="" class="fruit">
        <option label="apple" value="1">Apple</option>
        <option label="pear" value="2">Pear</option>
        <option label="orange" value="3">Orange</option>
    </optgroup>
    <optgroup label="" class="berries">
        <option label="strawberry" value="4">Strawberry</option>
        <option label="raspberry" value="5">Raspberry</option>
        <option label="blueberry" value="6">Blueberry</option>
    </optgroup>
</select>

I've tried $(this).find("option:selected").parent().attr("label") which only returns the optgroup of the first selected option, meaning if Strawberry and Pear were both selected, optgroup '.fruit' would be returned on both accounts.

Using jQuery, how do I get the optgroup of each selected option?

Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129

3 Answers3

16

Try this

$(this).find("option:selected").each(function(){
    $(this).parent().attr("label");
});
rahul
  • 184,426
  • 49
  • 232
  • 263
4

This may be a little late, but I just finished working on this issue and this seems to be the most elegant solution I have found:

$("#fruits option").filter(":selected").parent("optgroup").attr("label");

Here is a fiddle modified for this particular example (Using the class attribute rather than the label attribute): http://jsfiddle.net/pNjsj/

Hope that helps someone :)

Andrew Odri
  • 8,868
  • 5
  • 46
  • 55
  • If you're catching an event and doing $(e.target).filter(":selected") for some reason it won't work. In that case, $(e.target).find(":selected") works. In fact, find() works in both cases so I recommend you use that instead of filter(). – Swader Sep 21 '12 at 09:02
3

Try with .each()

$(this).find("option:selected").each(function(){
    alert($(this).parent().attr("label"));
});
Chinmayee G
  • 7,947
  • 2
  • 31
  • 41