Come modificare le opzioni di <select> con jQuery?


271

Supponiamo che sia disponibile un elenco di opzioni, come si aggiorna <select>con le nuove <option>s?

Risposte:


600

È possibile rimuovere le opzioni esistenti utilizzando il emptymetodo, 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 :gtselettore, per ottenere tutti gli optionelementi con indice maggiore di zero e removeloro:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

2
Come rimanere la prima opzione quando vuoto ()?
Maschera

2
Se si utilizza bootstrap-selezionare quindi aggiungere il seguente per aggiornare la select selettore dopo aver sostituito le opzioni: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. In caso contrario, le nuove opzioni non saranno visibili nell'elenco di selezione.
phn,

Come posso controllare una di queste opzioni?
Darós,

Personalmente trovo questa sintassi un po 'più pulita per la creazione del nodo jQuery$el.append($('<option/>', { value: value, text: key }));
rorofromfrance

Grazie ragazzi. se devi impostare il valore selezionato quando stiamo modificando la pagina per il valore selezionato predefinito, possiamo usare qualcosa del genere nel loop per iterazioni specifiche, possiamo aggiungere $ el.append selezionato ($ ('<opzione />', {valore : valore, selezionato: 'selezionato', testo: chiave}));
Sviluppatore

79

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

14
$('#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);

Non hai rimosso le vecchie opzioni?
Maschera

Vuoi cancellare quelli vecchi o semplicemente aggiungere nuove opzioni alle opzioni esistenti?
rahul,

5

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));
});

3

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.


1

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.


1
Perché l'OP dovrebbe provare questo? Per favore, aggiungi una spiegazione di ciò che hai fatto e del perché l'hai fatto in questo modo non solo per l'OP ma anche per i futuri visitatori di SO.
Jay Blanchard,

1

questo aiuta?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

3
Questa domanda riguarda l'aggiunta dinamica di <opzione> a una <selezione>, non la selezione di un'opzione specifica.
sisve

1

La vecchia scuola di fare le cose a mano è sempre stata buona per me.

  1. Pulisci la selezione e lascia la prima opzione:

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. 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 );
  3. 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.


0

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');
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.