Select2 v4.0 make optgroups auswählbar

Question

Ich benutze die neueste Version von select2 (4.0.0) und ich kann die Option nicht finden, um optgroups auswählbar zu machen.

Ein optgroup gruppieren verschiedene Optionen der Dropdown verwendet wird, wie in der Grund Beispielen gezeigt:

I wählbar zu sein, müssen diese optgoup! Es war in 3.5.1 möglich, aber es ist nicht mehr die Standardeinstellung in 4.0.0.

Mein Code sieht wie folgt aus:

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

Das war requested over on GitHub, aber realistisch it is not actually possible. Es war bisher möglich mit einer <input />, aber die Umstellung auf eine <select> bedeutete, dass wir jetzt explicitly disallow a selectable <optgroup>.

---

Es ist eine technische Barriere hier die Select2 wird wahrscheinlich nie angehen können: Ein Standard <optgroup> im Browser nicht wählbar ist. Und da ein Datenobjekt mit children in eine <optgroup> mit einer Reihe verschachtelter <option> Elemente konvertiert wird, gilt das Problem in Ihrem Fall mit dem gleichen Problem.

Die beste mögliche Lösung ist have an <option> for selecting the group, wie Sie mit einem Standard wählen würden. Ohne ein <option>-Tag ist es nicht möglich, den ausgewählten Wert für die Gruppe festzulegen (da der Wert tatsächlich nicht existiert). Select2 hat sogar eine templateResult Option (in 3.x), so dass Sie es einheitlich als Gruppe über alle Browser hinweg gestalten können.

Answer 2

Ich schaffe es, dies zu erreichen, indem die templateResult Eigenschaft verwenden und Click-Ereignisse auf die optgroups auf diese Weise angebracht:

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

und die dazugehörige 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

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

Nun, ich stieß auf dieses Problem und ich fo und dass jedes Mal, wenn select2 (Select2 4.0.5) geöffnet wird, ein span-Element vor dem schließenden body-Element hinzugefügt wird. Innerhalb des span-Elements wird außerdem eine ul mit den id: select2-X-Ergebnissen hinzugefügt, wobei X die select2-ID ist. So fand ich die folgende Problemumgehung (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>