Select2 v4.0 make optgroups selectable

Question

Używam najnowszej wersji select2 (4.0.0) i nie mogę znaleźć opcji wyboru grup optycznych do wybrania.

An optgroup służy do grupowania różnych opcji z listy rozwijanej, jak pokazano w swoich podstawowych przykładów:

muszę to optgoup być wybierane też! Było to możliwe w 3.5.1, ale nie jest już ustawieniem domyślnym w 4.0.0.

mój kod wygląda następująco:

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

To requested over on GitHub, ale realistycznie it is not actually possible. Było to wcześniej możliwe dzięki <input />, ale zmiana na <select> oznaczała, że ​​teraz jesteśmy explicitly disallow a selectable <optgroup>.

---

Jest bariera techniczna tutaj Wybór2 nigdy nie może być w stanie stawić czoła: Standardowy <optgroup> nie jest wybierany w przeglądarce. Ponieważ obiekt danych o numerze children jest konwertowany na <optgroup> z zestawem elementów zagnieżdżonych <option>, problem dotyczy przypadku z tym samym problemem.

Najlepsze możliwe rozwiązanie to have an <option> for selecting the group, tak jak w przypadku standardowego wyboru. Bez tagu <option> nie można ustawić wybranej wartości na grupę (ponieważ ta wartość w rzeczywistości nie istnieje). Select2 ma nawet opcję templateResult (formatResult w 3.x), dzięki czemu można ją ustawić w spójny sposób w różnych przeglądarkach.

Answer 2

uda mi się to osiągnąć za pomocą właściwości templateResult oraz załączeniem kliknięcia zdarzenia do optgroups w ten sposób:

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

i związanej z 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

Cóż, natknąłem się na tę kwestię i ja i że za każdym razem, gdy otwiera się select2 (Select2 4.0.5), dodaje element span przed zamykającym elementem body. Dodatkowo wewnątrz elementu span dodaje się ul z id: select2-X-results, gdzie X jest identyfikatorem select2. Tak więc okazało się, że następujące obejście (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>