Select2 v4.0 make optgroups selectable

Question

I'm using the latest version of select2 (4.0.0) and I can't find the option to make optgroups selectable.

An optgroup is used to group different options of the dropdown, as shown in their basic examples:

I need this optgoup to be selectable too! It was possible in 3.5.1 but it isn't the default setting in 4.0.0 anymore.

My Code Looks like this:

$(document).ready(function() {
   $('#countrySelect').select2({
     data: [{
       text: "group",
       "id": 1,
       children: [{
         "text": "Test 2",
         "id": "2"
       }, {
         "text": "Test 3",
         "id": "3",
         "selected": true
       }]
     }]
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />


<select id="countrySelect" style="width: 380px;" placeholder="Select regions..."></select>

Outshoot

possible duplicate of Selectable optgroups in Select2 – Soubise

not I duplicate because my question uses select2 version 4.0, while the marked question uses a previous version. The solution posted there didn't work for me. – Outshoot

Even if it is working, I like this answer better. It explains whey the optgroups selectable are not made selectable and doesn't offer "hack" workaround. – Outshoot

Well, I came across this issue and I found this workaround enter link description here – Resistor

Answer 1

This was requested over on GitHub, but realistically it is not actually possible. It was previously possible with a <input />, but the switch to a <select> meant that we now explicitly disallow a selectable <optgroup>.

---

There is a technical barrier here that Select2 will likely never be able to tackle: A standard <optgroup> is not selectable in the browser. And because a data object with children is converted to an <optgroup> with a set of nested <option> elements, the problem applies in your case with the same issue.

The best possible solution is to have an <option> for selecting the group, like you would have with a standard select. Without an <option> tag, it's not possible to set the selected value to the group (as the value doesn't actually exist). Select2 even has a templateResult option (formatResult in 3.x) so you can style it as a group consistently across browsers.

Soubise

:( My research showed the same. So if I want to have such a hierarchy options, I have to stay with 3.5.2 or style them via templates, maybe make an own query for it to show the group... do you happen to know of any plugin which supports this nested selection. Select2 is the most popular plugin providing this functionality right? – Outshoot

Answer 2

I manage to achieve this by using the templateResult property and attaching click events to the optgroups in this way:

$('#my-select').select2({
    templateResult: function(item) {
    if(typeof item.children != 'undefined') {

        var s = $(item.element).find('option').length - $(item.element).find('option:selected').length;
        // My optgroup element
        var el = $('<span class="my_select2_optgroup'+(s ? '' : ' my_select2_optgroup_selected')+'">'+item.text+'</span>');

        // Click event
        el.click(function() {
        // Select all optgroup child if there aren't, else deselect all
        $('#my-select').find('optgroup[label="' + $(this).text() + '"] option').prop(
            'selected',
            $(item.element).find('option').length - $(item.element).find('option:selected').length
        );
        // Trigger change event + close dropdown
        $('#my-select').change();
        $('#my-select').select2('close');
        });

        // Hover events to properly manage display 
        el.mouseover(function() {
        $('li.select2-results__option--highlighted').removeClass('select2-results__option--highlighted');
        });
        el.hover(function() {
        el.addClass('my_select2_optgroup_hovered');
        }, function() {
        el.removeClass('my_select2_optgroup_hovered');
        });
        return el;
    }
    return item.text;
    }
});

And the associated css:

.my_select2_optgroup_selected {
    background-color: #ddd;
}
.my_select2_optgroup_hovered {
    color: #FFF;
    background-color: #5897fb !important;
    cursor: pointer;
}
strong.select2-results__group {
    padding: 0 !important;
}
.my_select2_optgroup {
    display: block;
    padding: 6px;
}

Jerad

Thank you! Saved my day! I confirm it is working with select2 4.1.0 and jq 3.6.0 – Muezzin

Answer 3

Well, I came across this issue and I found that every time the select2 (Select2 4.0.5) opens it adds a span element before the closing body element. In addition, inside the span element adds a ul with the id: select2-X-results, where X is the select2 id. So I found the following workaround (jsfiddle):

var countries = [{
  "id": 1,
  "text": "Greece",
  "children": [{
    "id": "Athens",
    "text": "Athens"
  }, {
    "id": "Thessalonica",
    "text": "Thessalonica"
  }]
}, {
  "id": 2,
  "text": "Italy",
  "children": [{
    "id": "Milan",
    "text": "Milan"
  }, {
    "id": "Rome",
    "text": "Rome"
  }]
}];

$('#selectcountry').select2({
  placeholder: "Please select cities",
  allowClear: true,
  width: '100%',
  data: countries
});

$('#selectcountry').on('select2:open', function(e) {

  $('#select2-selectcountry-results').on('click', function(event) {

    event.stopPropagation();
    var data = $(event.target).html();
    var selectedOptionGroup = data.toString().trim();

    var groupchildren = [];

    for (var i = 0; i < countries.length; i++) {


      if (selectedOptionGroup.toString() === countries[i].text.toString()) {

        for (var j = 0; j < countries[i].children.length; j++) {

          groupchildren.push(countries[i].children[j].id);

        }

      }


    }


    var options = [];

    options = $('#selectcountry').val();

    if (options === null || options === '') {

      options = [];

    }

    for (var i = 0; i < groupchildren.length; i++) {

      var count = 0;

      for (var j = 0; j < options.length; j++) {

        if (options[j].toString() === groupchildren[i].toString()) {

          count++;
          break;

        }

      }

      if (count === 0) {
        options.push(groupchildren[i].toString());
      }
    }

    $('#selectcountry').val(options);
    $('#selectcountry').trigger('change'); // Notify any JS components that the value changed
    $('#selectcountry').select2('close');    

  });
});

li.select2-results__option strong.select2-results__group:hover {
  background-color: #ddd;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>


<h1>Selectable optgroup using select2</h1>
<select id="selectcountry" name="country[]" class="form-control" multiple style="width: 100%"></select>

Resistor

Answer 4

Had the same problem today. This is certainly not my nicest solution, but beggars can't be choosers:

$(document).on('click', '.select2-results__group', function(event) {
        let select2El = $('#mySelect2');
        var setValues = [];
        //Add existing Selection
        var selectedValues = select2El.select2('data');
        for ( var i = 0, l = selectedValues.length; i < l; i++ ) {
            setValues.push(selectedValues[i].id);

        }
        //Add Group Selection
        $(this).next('ul').find('li').each(function(){
            let pieces = $(this).attr('data-select2-id').split('-');
            setValues.push(pieces[pieces.length-1]);
        });
        select2El.val(setValues).trigger('change').select2("close");
    });

Antiperspirant

Answer 5

$(document).ready(function() {
   $('#countrySelect').select2({
     data: [{
       text: "group",
       "id": 1,
       children: [{
         "text": "Test 2",
         "id": "2"
       }, {
         "text": "Test 3",
         "id": "3",
         "selected": true
       }]
     }]
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />


<select id="countrySelect" style="width: 380px;" placeholder="Select regions..."></select>

Ravenna