Come visualizzare i tag selezionati in Select2 sotto il menu a discesa?

Question

Sto usando Select2 (versione 4) con i tag e vorrei che le scelte selezionate fossero visualizzate sotto il campo di inserimento.

Così, invece di:

hanno Piuttosto:

Questo è possibile e se sì, come posso ottenere che?

EDIT: Codice è:

<select class="js-example-tags form-control" multiple="multiple"> 
    <option selected="selected">orange</option> 
    <option selected="selected">white</option> 
    <option selected="selected">purple</option> 
    <option selected="selected">red</option> 
    <option selected="selected">blue</option> 
    <option selected="selected">green</option> 
</select> 

e

$(".js-example-tags").select2({ 
tags: true 
}) 

Answer 1

Quando gli elementi vengono resi, viene aggiunto un ul con una classe per gli elementi. Questo nome classe è: select2-selection__rendered Quindi la mia idea era che dopo il rendering, potevo prendere questa classe e aggiungere un po 'di bottom. Per questo ho utilizzato JQuery utilizzando $(function() nota che quello che fa è di caricare dopo che tutto è stato caricato, quindi per il codice javascript necessario, è la seguente (testato):

codice

Javascript:

<script> 
    $(".js-example-tags").select2({ 
    tags: true 
    }); 

    $(function() { 
     //Here you add the bottom pixels you need. I added 200px. 
     $('.select2-selection__rendered').css({top:'200px',position:'relative'}); 
    }); 
    </script> 

Answer 2

Non riesco a commentare la risposta selezionata ... ma per quanto riguarda i casi in cui sono presenti più select2 sulla pagina e voglio solo farlo a uno. c'è un modo affidabile per identificare quello contro tutti?

Answer 3

Mi sono imbattuto in questa domanda poche settimane fa e volevo condividere una soluzione alternativa che ritenevo avesse meno rischi di alcune delle modifiche di stile a Select2 richieste da altre risposte.

Cosa nostra squadra ha finito per usare è stato uno script che ascoltò il change evento del sottostante <select> elemento per costruire/ricostruire una lista non ordinata stile in un elemento di pari livello:

$(".js-example-tags").select2({ 
    tags: true 
}).on('change', function() { 
    var $selected = $(this).find('option:selected'); 
    var $container = $(this).siblings('.js-example-tags-container'); 

    var $list = $('<ul>'); 
    $selected.each(function(k, v) { 
     var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>'); 
     $list.append($li); 
    }); 
    $container.html('').append($list); 
}).trigger('change'); 

E, per dare al nuovo elencare la funzionalità oltre alla comparsa dei tag Select2, abbiamo ascoltato per un evento click e associato ogni elemento nell'elenco con il corrispondente option nella <select> quindi potrebbe cambiare lo stato selezionato e attivare nuovamente l'evento change:

$selected.each(function(k, v) { 
    var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>'); 
    $li.children('a.destroy-tag-selected') 
     .off('click.select2-copy') 
     .on('click.select2-copy', function(e) { 
       var $opt = $(this).data('select2-opt'); 
       $opt.attr('selected', false); 
       $opt.parents('select').trigger('change'); 
     }).data('select2-opt', $(v)); 
    $list.append($li); 
}); 

Dopo questo, era questione di usare display: none per nascondere gli elementi .select2-selection__choice.

L'esempio completo è disponibile per la revisione qui: http://jsfiddle.net/tjnicolaides/ybneqdqa/ - spero che questo aiuti qualcun altro.