Jquery – selection box rimuovere ed aggiungere valori

Piccola guida / promemoria per eseguire un aggiornamento di una selection box utilizzando una funzione Jquery.

Per aggiornare una selection box quindi ri caricare la lista dei dati selezionabili si procede prima rimuovendo il contenuto poi reinserendo i valori necessari.

Rimuovere la lista

Diamo come id alla nostra lista “sellista” quindi rimuoviamone il contenuto con il comando:

$('#sellista')
.find('option')
.remove()
.end();

Aggiungere dati alla lista

Quindi per ogni valore che dobbiamo aggiungere inseriamo i dati con il comando .append() inserendo l’intero tag HTML necessario ad inserire un valore <option value=”123″>123</option>.

$('#sellista')
.find('option')
.end()
.append('<option> ... </option>')
.val(id)
;

Nel tag HTM ho impostato i valori value=”” selected disabled hidden in modo da bloccare la prima selezione in modo da renderla non selezionabile

Nell’esempio sotto vediamo come funziona a livello pratico con un esempio da Fiddle.

Lo script è anche disponibile su GitHub a questo link: https://github.com/Amply666/Computer4Dummy/blob/master/Articoli/Jquery%20-%20selection%20box%20rimuovere%20ed%20aggiungere%20valori/test.html