Optgroup selezionabili in Select2

Question

Voglio creare opzioni di selezione 2 multilivello con indentazione, ma non voglio utilizzare gli elementi optgroup per questo perché voglio consentire selezionare anche le categorie principali. C'è un modo di stile se per select2?

mie prime HTML selezionare assomiglia a questo:

<select class="js-select-multiple"> 
    <option class="l1">Option 1</option> 
    <option class="l2">Suboption 1</option> 
    <option class="l2">Suboption 2</option> 
    <option class="l2">Suboption 3</option> 
    <option class="l1">Option 2</option> 
    ... 
</select> 
<script>$(".js-select-multiple").select2({maximumSelectionLength: 5});</script> 

Quindi, senza utilizzare Select2 posso aggiungere text-indent proprietà .l2 classe. Tuttavia sembra che Select2 non utilizzi le classi utilizzate per l'opzione, quindi lo stile di quelle classi non funzionerà.

Esiste una soluzione alternativa?

Answer 1

Hai ragione nel riconoscere che Select2 non porta le classi CSS dai tag <option> all'elenco dei risultati. Questo ha principalmente a che fare non legando esplicitamente l'elenco dei risultati ai tag esistenti <option> e disponendo anche di un set di valori predefiniti sensibili. È più facile aggiungere la possibilità di trasferire le classi in seguito piuttosto che rimuoverle.

È possibile eseguire questa operazione ignorando templateResult e ottenere l'opzione originale da data.element (dove data è il primo parametro).

$('.select2').select2({ 
 
    templateResult: function (data) {  
 
    // We only really care if there is an element to pull classes from 
 
    if (!data.element) { 
 
     return data.text; 
 
    } 
 

 
    var $element = $(data.element); 
 

 
    var $wrapper = $('<span></span>'); 
 
    $wrapper.addClass($element[0].className); 
 

 
    $wrapper.text(data.text); 
 

 
    return $wrapper; 
 
    } 
 
});

.l2 { 
 
    padding-left: 1em; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> 
 

 
<select class="select2" style="width: 200px"> 
 
    <option class="l1">Option 1</option> 
 
    <option class="l2">Suboption 1</option> 
 
    <option class="l2">Suboption 2</option> 
 
    <option class="l2">Suboption 3</option> 
 
    <option class="l1">Option 2</option> 
 
</select>

Nota che sto anche utilizzando padding-left invece di text-indent, che è ciò che Select2 solito usa per le opzioni nidificate.