Risposte:
È possibile rimuovere le opzioni esistenti utilizzando il empty
metodo, quindi aggiungere le nuove opzioni:
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);
Se hai le tue nuove opzioni in un oggetto puoi:
var newOptions = {"Option 1": "value1",
"Option 2": "value2",
"Option 3": "value3"
};
var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
Modifica: per rimuovere tutte le opzioni tranne la prima, puoi usare il :gt
selettore, per ottenere tutti gli option
elementi con indice maggiore di zero e remove
loro:
$('#selectId option:gt(0)').remove(); // remove all options, but not the first
$('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');
. In caso contrario, le nuove opzioni non saranno visibili nell'elenco di selezione.
$el.append($('<option/>', { value: value, text: key }));
Ho gettato l'eccellente risposta di CMS in una rapida estensione jQuery:
(function($, window) {
$.fn.replaceOptions = function(options) {
var self, $option;
this.empty();
self = this;
$.each(options, function(index, option) {
$option = $("<option></option>")
.attr("value", option.value)
.text(option.text);
self.append($option);
});
};
})(jQuery, window);
Si aspetta una matrice di oggetti che contengono chiavi "testo" e "valore". Quindi l'utilizzo è il seguente:
var options = [
{text: "one", value: 1},
{text: "two", value: 2}
];
$("#foo").replaceOptions(options);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
dove comboBx è l'ID della casella combinata.
oppure puoi aggiungere opzioni come stringa al innerHTML già esistente e quindi assegnare al innerHTML selezionato.
modificare
Se è necessario mantenere la prima opzione e rimuovere tutte le altre, è possibile utilizzare
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
Per qualche strana ragione questa parte
$el.empty(); // remove old options
dalla soluzione CMS non ha funzionato per me, quindi invece ho semplicemente usato questo
el.html(' ');
E funziona. Quindi il mio codice di lavoro ora appare così:
var newOptions = {
"Option 1":"option-1",
"Option 2":"option-2"
};
var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
La rimozione e l'aggiunta dell'elemento DOM è più lenta della modifica di uno esistente.
Se i tuoi set di opzioni hanno la stessa lunghezza, puoi fare qualcosa del genere:
$('#my-select option')
.each(function(index) {
$(this).text('someNewText').val('someNewValue');
});
Nel caso in cui il tuo nuovo set di opzioni abbia una lunghezza diversa, puoi eliminare / aggiungere opzioni vuote di cui hai veramente bisogno, usando alcune tecniche descritte sopra.
Se ad esempio il tuo codice html contiene questo codice:
<select id="selectId"><option>Test1</option><option>Test2</option></select>
Per modificare l'elenco di opzioni all'interno della selezione, è possibile utilizzare questo codice sotto. quando il tuo nome seleziona denominato selectId .
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);
in questo esempio sopra cambio il vecchio elenco di opzioni solo con una nuova opzione.
La vecchia scuola di fare le cose a mano è sempre stata buona per me.
Pulisci la selezione e lascia la prima opzione:
$('#your_select_id').find('option').remove()
.end().append('<option value="0">Selec...</option>')
.val('whatever');
Se i tuoi dati provengono da un Json o altro (basta concatene i dati):
var JSONObject = JSON.parse(data);
newOptionsSelect = '';
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
}
}
$('#your_select_id').append( newOptionsSelect );
My Json Objetc:
[{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
Questa soluzione è ideale per lavorare con Ajax e risponde in Json da un database.
se aggiorniamo <select>
costantemente e dobbiamo salvare il valore precedente:
var newOptions = {
'Option 1':'value-1',
'Option 2':'value-2'
};
var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
$el.append($('<option></option>').attr('value', value).text(key));
if (value === prevValue){
$el.val(value);
}
});
$el.trigger('change');