Select2 v4.0使optgroups可选

Question

我正在使用最新版本的select2(4.0.0),我找不到使optgroups可选的选项.

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

这是在GitHub上请求的,但实际上它实际上是不可能的.以前可以使用a <input />,但切换到a <select>意味着我们现在明确禁止可选择<optgroup>.

这里有一个技术障碍,Select2可能永远无法解决:标准<optgroup>在浏览器中无法选择.并且因为数据对象children被转换为<optgroup>具有一组嵌套<option>元素的数据对象,所以问题适用于具有相同问题的情况.

最佳的解决方案是有一个<option>选择的组,就像你有选择的标准.如果没有<option>标记,则无法将所选值设置为组(因为该值实际上不存在).Select2甚至有一个templateResult选项(formatResult在3.x中),因此您可以在浏览器中一致地将其设置为一个组.

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的ul：select2-X-results，其中X是select2的id。所以我找到了以下解决方法（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>