Comment changer les options de <select> avec jQuery?

Supposons qu'une liste d'options soit disponible, comment mettre à jour le <select>avec de nouveaux <option>s?

Vous pouvez supprimer les options existantes à l'aide de la emptyméthode, puis ajouter vos nouvelles options:

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

Si vous avez vos 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 supprimer toutes les options sauf la première, vous pouvez utiliser le :gtsélecteur, pour obtenir tous les optionéléments avec un index supérieur à zéro et removeeux:

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

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 des clés "texte" et "valeur". Donc, l'utilisation est la suivante:

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

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

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

où comboBx est votre identifiant de zone de liste modifiable.

ou vous pouvez ajouter des options sous forme de chaîne au innerHTML déjà existant, puis l'affecter au select innerHTML.

Éditer

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

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é cela

el.html(' ');

Et ça marche. Donc mon code de travail ressemble maintenant à ç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));
});

La suppression et l'ajout d'un élément DOM sont plus lents que la modification d'un élément existant.

Si vos jeux d'options ont la même longueur, vous pouvez faire quelque chose comme ceci:

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

Dans le cas où votre nouveau jeu d'options a une longueur différente, vous pouvez supprimer / ajouter des options vides dont vous avez vraiment besoin, en utilisant une technique décrite ci-dessus.

Si par exemple votre code html contient ce code:

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

Afin de changer la liste des options dans votre sélection, vous pouvez utiliser ce code ci-dessous. lorsque votre nom sélectionnez nommé selectId .

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

dans cet exemple ci-dessus, je change l'ancienne liste d' options par une seule nouvelle option.

est-ce que cela aide?

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

La vieille école de faire les choses à la main a toujours été bonne pour moi.

1. Nettoyez la sélection et laissez la première option:

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

2. Si vos données proviennent d'un Json ou autre chose (Concattez simplement les données):

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

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

Cette solution est idéale pour travailler avec Ajax et répond dans Json à partir d'une base de données.

si nous mettons à jour <select>constamment et que nous devons sauvegarder la valeur précédente:

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