selezione selezione non funziona in select2

Question

Ho implementato widget select2, versione 4. Funziona, ma l'icona x. Non sta cancellando la selezione.

Se viene visualizzato questo documento: https://select2.github.io/options.html, si dice che questo è un problema, ma la documentazione è incompleta per questo.

Chiunque ha già risolto questo?

Grazie Jaime

Answer 1

Finalmente ho trovato un bug nei Select2 4.0.2.

La soluzione è presente, in select2.js, linea 1760.

Questo deve essere sostituita:

this.$element.val(this.placeholder.id).trigger('change'); 

this.trigger('toggle', {}); 

By:

this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change'); 

//this.trigger('toggle', {}); 

Questa soluzione fa sì che anche la discesa non per apparire quando la selezione è cancellata.

Answer 2

No, non è un bug. L'icona "X" richiede l'opzione segnaposto. Senza di esso, l'opzione clearAllow non può essere utilizzata. Quindi, il codice a destra sarà così:

$(".js-example-placeholder-single").select2({ 
    placeholder: "Put some text...", 
    allowClear : true 
}); 

A proposito, v'è un'opzione non documentata chiamato di debug. Se lo si passa al metodo select2(), gli errori trovati verranno stampati sulla console. Ad esempio di codice in seguito:

$(".js-example-placeholder-single").select2({ 
    //placeholder: "Put some text...", 
    allowClear : true, 
    debug: true 
    }); 

andranno in console del browser:

Perché allowClear richiede l'opzione segnaposto?

Il vero menù a tendina, che si crea con <select> e <option> elementi nasconde da select2. E creato uno nuovo.

Nel nuovo elenco a discesa creato, il campo visualizzato dall'utente (senza elenco a discesa) creato automaticamente. Ogni volta che si seleziona la nuova opzione, select2 cambierà il campo precedente con uno nuovo.

Quando si fa clic sull'icona X, si elimina anche il campo principale. E crea un nuovo campo con parametri di segnaposto.

Answer 3

Nel mio caso, il pulsante di cancellazione non funziona anche se l'opzione segnaposto è impostata. Devo aggiungere la proprietà z-index:

.select2-container .select2-selection--single .select2-selection__rendered { 
    z-index:1; 
}