Question

我使用的是最新版本的select2（4.0.0），我找不到使optgroups可选的选项。

optgroup用于对下拉列表的不同选项进行分组，如其基本示例所示： Example for an optgroup

我需要这个optgoup也可以选择！它在3.5.1中是可能的，但它不再是4.0.0中的默认设置。

我的代码看起来像这样：

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

Answer 1

这是requested over on GitHub，但实际上是it is not actually possible。之前可以使用<input />，但切换到<select>意味着我们现在explicitly disallow a selectable <optgroup>。

这里有一个技术障碍，Select2可能永远无法解决：标准<optgroup>在浏览器中无法选择。并且因为带有children的数据对象转换为带有一组嵌套<optgroup>元素的<option>，所以问题适用于您的案例中同样的问题。

最好的解决方案是have an <option> for selecting the group，就像使用标准选择一样。如果没有<option>标记，则无法将所选值设置为组（因为该值实际上不存在）。 Select2甚至还有一个templateResult选项（3.x中为formatResult），因此您可以在浏览器中将其设置为一个组。

Answer 2

我设法通过使用templateResult属性并以这种方式将click事件附加到optgroups来实现此目的：

$('#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;
    }
});

关联的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;
}

Answer 3

好吧，我遇到了这个问题，我发现每次select2（Select2 4.0.5）打开时，它会在关闭的body元素之前添加一个span元素。另外，在span元素中添加一个带有id：select2-X-results的ul，其中X是select2 id。所以我找到了以下解决方法（jsfiddle）：

＆＃13;

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');    

  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

今天遇到了同样的问题。这当然不是我最好的解决方案，但乞丐不能挑剔：

$(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");
    });

Answer 5

＆＃13;

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

＆＃13;

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

＆＃13;

Select2 v4.0 make optgroups selectable

5 个答案: