Comment changer les options de <select> avec jQuery?

271

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

Masque
la source

Réponses:

600

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 
CMS
la source
2
Comment rester la première option lorsque empty ()?
Masque
2
Si vous utilisez bootstrap sélectionnez puis ajouter ce qui suit pour actualiser le sélecteur de sélection après avoir remplacé les options: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. Sinon, les nouvelles options ne seront pas visibles dans votre liste de sélection.
phn
Comment puis-je vérifier l'une de ces options?
Darós
$el.append($('<option/>', { value: value, text: key }));
Personnellement,
Merci les gars. si vous devez définir la valeur sélectionnée lorsque nous modifions la page pour la valeur sélectionnée par défaut, nous pouvons utiliser quelque chose comme ça dans la boucle pour une itération spécifique, nous pouvons ajouter $ el.append sélectionné ($ ('<option />', {valeur : valeur, sélectionné: 'sélectionné', texte: clé}));
Développeur
79

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);
ktusznio
la source
14
$('#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);
rahul
la source
Vous n'avez pas supprimé les anciennes options?
Masque
Voulez-vous effacer les anciennes ou simplement ajouter de nouvelles options aux options existantes?
rahul
5

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));
});
Draco
la source
3

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.

Yuri Gor
la source
1

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.

BERGUIGA Mohamed Amine
la source
1
Pourquoi le PO devrait-il essayer cela? Veuillez ajouter une explication de ce que vous avez fait et pourquoi vous l'avez fait de cette manière non seulement pour le PO mais pour les futurs visiteurs de SO.
Jay Blanchard
1

est-ce que cela aide?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;
vierzehn
la source
3
Cette question concerne l'ajout dynamique de <option> à un <select>, et non la sélection d'une option spécifique.
2017
1

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.

Toto
la source
0

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');
Roman Yakoviv
la source