jQuery select2 show optgroup label when selected

Question

I am using the jQuery plugin Select2

If I have a multiselect with the following structure:

<select name="search-term[]" multiple="multiple">
    <optgroup label="Categories">
    <option value="category_4">Internal</option>
    <option value="category_2">Business</option>
    <option value="category_5">External</option>
    <option value="category_1">Science</option>
    <option value="category_6">Sports and Social</option>
    </optgroup>
    <optgroup label="Event Types">
    <option value="eventtype_2">Meeting</option>
    <option value="eventtype_3">Social Activity</option>
    <option value="eventtype_4">Sporting Activity</option>
    <option value="eventtype_1">Symposium</option>
    </optgroup>
    <optgroup label="Locations">
    <option value="location_2">Office 1</option>
    <option value="location_3">Office 2</option>
    <option value="location_1">Office 3</option>
    </optgroup>
</select>

If I select "Office 1" under the optgroup labelled Locations then the label on the selected option says "Office 1"

Is there a way to change this so that it shows the optgroup label as well so the label on the selection option would say "Location: Office 1".

See the following image for the label I am referring to:

Margartmargate

I think this is what you are looking for: #19037732 – Farm

Answer 1

I sorted it in the end using the templateSelection option like so:

$('select').select2({
    templateSelection: function(item)
    {
        value = item.id;
        select_name = item.element.offsetParent.name;

        optgroup_label = $('select[name="'+ select_name +'"] option[value="'+ value +'"]').parent('optgroup').prop('label');

        if(typeof optgroup_label != 'undefined') {
            return optgroup_label+': ' + item.text;
        } else {
            return item.text;
        }
    }
});

Margartmargate

Note from a few years later: it still works! I'm using select2 4.x – Pineda

Still useful, to use it in a simple select use optgroup_label = item.element.parentNode.label to get the optgroup. – Resurge

Answer 2

I do a jsFiddle for you, see https://jsfiddle.net/vcwrjpny/

$('option').click(function() {
    alert($(this).parent('optgroup').attr('label'));
})

EDIT :

with plugin select2 :

Do like that : see here http://jsfiddle.net/bJxFR/68/

  function format(item) {
           opt = $('select').find(':selected');
           sel = opt.text();
           og = opt.closest('optgroup').attr('label');
           alert('your optgroup is : ' + og);
          return item.text;

    }
    $("select").select2({
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
    });

Bush

YEEESS that's what i am looking for while dynaically adding and remove from select2 parent('optgroup').attr('label')....Thax alot – Punchy

Answer 3

When I attempted to use geoffs3310's solution I found that it was generating an error in IE11 about item.element.offsetParent being undefined. I ended up coming up with an alternative solution which seems a bit less complicated. I used this function for my templateSelection:

function select2IncludeOptgroupSelection(item) {
    // If the element does not belong to an optgroup, just return the text
    if ((item.element.parentElement.tagName != 'OPTGROUP') || !item.element.parentElement.label) {
        return item.text;
    }
    else {
        return item.element.parentElement.label + ': ' + item.text;
    }
}

In my case we use script to load all our standard select2 settings for all multi-selects, so I wanted to make the function only apply if a specific class was on the select field. So this is the version I ended up using:

function select2IncludeOptgroupSelection(item) {
    // If the element does not belong to an optgroup, just return the text
    if (item.element.parentElement.tagName != 'OPTGROUP') {
        return item.text;
    }

    // If we are still here, determine whether we want to add the label
    var select_name = item.element.parentElement.parentElement.name;

    var addOptgroup = $('select[name="'+ select_name +'"]').hasClass('selection-add-optgroup');

    if (addOptgroup && item.element.parentElement.label) {
        return item.element.parentElement.label + ': ' + item.text;
    }
    else {
        return item.text;
    }
}

Haroun