Wie ändert man die Optionen von <select> mit jQuery?

Question

Angenommen, eine Liste von Optionen ist verfügbar, wie aktualisieren Sie die <select> mit neuen <option> s?

Answer 1

verwenden Sie können die vorhandenen Optionen entfernen, indem die empty Methode verwenden, und dann Fügen Sie Ihre neuen Optionen hinzu:

var option = $('<option></option>').attr("value", "option value").text("Text"); 
$("#selectId").empty().append(option); 

Wenn Sie haben Sie Ihre neue Optionen in einem Objekt können Sie:

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

Edit: Für die alle Optionen zu entfernen, aber die erste, können Sie den :gt Selektor verwenden, erhalten alle option Elemente mit Index größer als Null und remove sie:

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

Answer 2

$('#comboBx').append($("<option></option>").attr("value",key).text(value)); 

wo ComboBx ist Ihre Combo-Box-ID.

oder Sie können Optionen als String an die bereits vorhandene innerHTML anhängen und dann der ausgewählten innerHTML zuweisen.

bearbeiten

Wenn Sie die erste Option zu halten brauchen, und entfernen Sie alle anderen, dann können Sie

var firstOption = $("#cmb1 option:first-child"); 
$("#cmb1").empty().append(firstOption); 

Answer 3

I CMS ausgezeichnete Antwort in eine schnelle jQuery-Erweiterung warf:

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

Es erwartet ein Array von Objekten, die "text" - und "value" -Tasten enthalten. So Nutzung ist wie folgt:

var options = [ 
    {text: "one", value: 1}, 
    {text: "two", value: 2} 
]; 

$("#foo").replaceOptions(options); 

Answer 4

Aus irgendeinem Grund, diesen Teil

$el.empty(); // remove old options 

von CMS-Lösung nicht für mich arbeiten, so statt, dass ich einfach dieses

verwendet habe

el.html(' '); 

Und es funktioniert. Also meine Arbeits Code sieht nun wie folgt aus:

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

Answer 5

Wenn zum Beispiel Ihre HTML-Code diesen Code enthalten:

<select id="selectId"><option>Test1</option><option>Test2</option></select> 

Um die Liste der Option in Ihrem wählen zu ändern, können Sie diesen Code verwenden brüllen. Wenn Ihr Name gewählt wird, wählen Sie selectId.

var option = $('<option></option>').attr("value", "option value").text("Text"); 
$("#selectId").html(option); 

in diesem Beispiel oben i die alte Liste der Option ändern durch nur eine neue Option.

Answer 6

Das Entfernen und Hinzufügen eines DOM-Elements ist langsamer als das Ändern eines vorhandenen.

Wenn Ihre Optionsgruppen gleiche Länge haben, können Sie etwas tun:

$('#my-select option') 
.each(function(index) { 
    $(this).text('someNewText').val('someNewValue'); 
}); 

Falls Ihre neue Option Satz hat unterschiedliche Länge, können Sie löschen/hinzufügen leer Optionen, die Sie wirklich brauchen, etwas Technik oben beschrieben.

Answer 7

wenn wir <select> ständig aktualisieren und wir brauchen vorherigen Wert speichern:

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

Answer 8

Does diese Hilfe?

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