Wie ändere ich die Optionen von <select> mit jQuery?

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

Sie können die vorhandenen Optionen mithilfe der emptyMethode entfernen und dann Ihre neuen Optionen hinzufügen:

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

Wenn Sie Ihre neuen Optionen in einem Objekt haben, 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));
});

Bearbeiten: Um alle Optionen außer der ersten zu entfernen, können Sie den :gtSelektor verwenden, um alle optionElemente mit einem Index größer als Null zu erhalten, und removediese:

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

Ich habe die ausgezeichnete Antwort von CMS in eine schnelle jQuery-Erweiterung geworfen:

(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 Schlüssel "Text" und "Wert" enthalten. Die Verwendung ist also wie folgt:

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

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

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

Dabei ist comboBx Ihre Kombinationsfeld-ID.

oder Sie können Optionen als Zeichenfolge an das bereits vorhandene innerHTML anhängen und dann dem ausgewählten innerHTML zuweisen.

Bearbeiten

Wenn Sie die erste Option beibehalten und alle anderen entfernen müssen, können Sie sie verwenden

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

Aus irgendeinem Grund dieser Teil

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

Die CMS-Lösung hat bei mir nicht funktioniert, stattdessen habe ich sie einfach verwendet

el.html(' ');

Und es funktioniert. Mein Arbeitscode sieht jetzt so 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));
});

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

Wenn Ihre Optionssätze dieselbe Länge haben, können Sie Folgendes tun:

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

Falls Ihr neuer Optionssatz eine andere Länge hat, können Sie leere Optionen, die Sie wirklich benötigen, mithilfe einer oben beschriebenen Technik löschen / hinzufügen.

Wenn Ihr HTML-Code beispielsweise diesen Code enthält:

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

Um die Liste der Optionen in Ihrer Auswahl zu ändern, können Sie diesen Code unten verwenden. Wenn Ihr Name benannt ist, wählen Sie selectId .

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

In diesem Beispiel oben ändere ich die alte Liste der Optionen durch nur eine neue Option.

Hilft das?

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

Die alte Schule, Dinge von Hand zu machen, war immer gut für mich.

1. Reinigen Sie die Auswahl und lassen Sie die erste Option:

       $('#your_select_id').find('option').remove()
       .end().append('<option value="0">Selec...</option>')
       .val('whatever');

2. Wenn Ihre Daten von einem Json oder was auch immer stammen (nur die Daten zusammenfassen):

       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. Mein Json Objetc:

       [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

Diese Lösung ist ideal für die Arbeit mit Ajax und antwortet in Json aus einer Datenbank.

Wenn wir <select>ständig aktualisieren und den vorherigen Wert speichern müssen:

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