Select2 v4.0 rende selezionabili i gruppi di selezione

Question

Sto utilizzando l'ultima versione di select2 (4.0.0) e non riesco a trovare l'opzione per rendere selezionabili gli optgroup.

Un optgroup viene utilizzato per raggruppare le diverse opzioni del menu a discesa, come mostrato nei loro esempi di base:

Ho bisogno di questo optgoup essere troppo selezionabili! Era possibile in 3.5.1 ma non è più l'impostazione predefinita in 4.0.0.

mio codice simile a questo:

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

Questo è stato requested over on GitHub, ma realisticamente it is not actually possible. In precedenza era possibile con un <input />, ma il passaggio a un <select> significava che ora siamo explicitly disallow a selectable <optgroup>.

---

c'è una barriera tecnica qui che Select2 sarà probabilmente mai in grado di affrontare: Uno standard <optgroup> non è selezionabile nel browser. E poiché un oggetto dati con children viene convertito in un <optgroup> con un set di elementi nidificati <option>, il problema si applica nel tuo caso con lo stesso problema.

La migliore soluzione possibile è have an <option> for selecting the group, come si farebbe con una selezione standard. Senza un tag <option>, non è possibile impostare il valore selezionato per il gruppo (poiché il valore in realtà non esiste). Select2 ha anche un'opzione templateResult (formatResult in 3.x) in modo da poterla applicare in modo coerente come gruppo attraverso i browser.

Answer 2

riesco a raggiungere questo obiettivo utilizzando la proprietà templateResult e allegando eventi click alle optgroups in questo modo:

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

E il CSS associato:

.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

Beh, mi sono imbattuto in questo problema e ho e che ogni volta che si apre select2 (Select2 4.0.5) aggiunge un elemento span prima dell'elemento body di chiusura. Inoltre, all'interno dell'elemento span aggiunge un ul con l'id: select2-X-results, dove X è l'id select2. così ho trovato la seguente soluzione (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>