Select2

Question

'da seçilebilir olan seçimlik gruplar Girintili çok düzeyli select2 seçenekleri oluşturmak istiyorum ancak bunun için ayrıca ana kategorileri seçmesine izin vermek istediğim için optgroup öğelerini kullanmak istemiyorum. Select2 için stil var mı? Böyle

Benim ham HTML select görünüyor:

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

Yani Select2 kullanmadan ben text-indent mülkiyet sınıfı .l2 ekleyebilir. Ancak, Select2'un seçenek için kullanılan sınıfları kullanmadığı görülüyor;

Bunun için bir çözüm var mı?

Answer 1

Select2'nin, <option> etiketlerinden CSS sınıflarını, sonuç listesine taşımamış olduğunu kabul etmekte haklısınız. Bu çoğunlukla, sonuç listesini mevcut <option> etiketlerine açıkça bağlı değil ve aynı zamanda bir dizi makul varsayılana sahip olmakla ilgilidir. Daha sonra sınıfları transfer etmekten daha fazlasını kaldırmak daha kolaydır.

Bunu, templateResult'u geçersiz kılarak ve orijinal seçeneği data.element'dan (data ilk parametre olan) alarak yapabilirsiniz.

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

Select2 genellikle iç içe seçenekleri için kullandığı şeydir ben de yerine text-indent ait padding-left kullanıyorum

Not.