Comment changer les options de <select> avec jQuery?

Question

Supposons qu'une liste d'options est disponible, comment mettez-vous à jour le <select> avec le nouveau <option> s?

Answer 1

Vous pouvez supprimer les options existantes à l'aide de la empty méthode, puis ajoutez vos nouvelles options:

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

Si vous avez de nouvelles options dans un objet, vous pouvez:

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: Pour la suppression de toutes les options, mais le premier, vous pouvez utiliser l' :gt sélecteur, pour obtenir tous les option des éléments avec un indice supérieur à zéro et remove :

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

Answer 2

J'ai jeté l'excellente réponse de CMS dans une extension jQuery rapide:

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

Il attend un tableau d'objets contenant les clés "texte" et "valeur". Donc, l'utilisation est la suivante:

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

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

Answer 3

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

où comboBx est votre identifiant de zone de liste déroulante.

ou vous pouvez ajouter des options en tant que chaîne au innerHTML déjà existant, puis l'affecter à selectHTML.

modifier

Si vous devez conserver la première option et supprimer toutes les autres, vous pouvez utiliser

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

Answer 4

Pour une raison étrange cette partie

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

de la solution CMS n'a pas fonctionné pour moi, donc au lieu de cela, j'ai simplement utilisé cette

 el.html(' ');
 

Et ça marche. Donc mon code de travail ressemble à ça:

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