web-dev-qa-db-fra.com

Comment changer les options de <select> avec jQuery?

Supposons qu’une liste d’options soit disponible. Comment mettre à jour le <select> avec le nouveau <option>s?

jqueryhtml-select
257
Mask

Vous pouvez supprimer les options existantes en utilisant la méthode empty , puis ajoutez 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 sélecteur :gt , pour obtenir tous les éléments option avec un index supérieur à zéro et remove eux:

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

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

(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 "text" et "value". Donc, l'utilisation est la suivante:

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

$("#foo").replaceOptions(options);
74
ktusznio
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

où comboBx est l'identifiant de votre combo.

vous pouvez également ajouter des options sous forme de chaîne au code innerHTML existant, puis les affecter au type de code innerHTML sélectionné.

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

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

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

Si vos ensembles 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');
});

Si la longueur de votre nouvel ensemble d’options est différente, vous pouvez supprimer/ajouter les options vides dont vous avez réellement besoin, à l’aide de la technique décrite ci-dessus.

3
Yuri Gor

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 (simplement Concat 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 objet Json:

        [{"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 à Json à partir d'une base de données.

1
Toto

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 modifie l'ancienne liste de option par une seule nouvelle option.

1
BERGUIGA Mohamed Amine

si nous mettons à jour constamment <select> 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');
0
Roman Yakoviv

Est-ce que cela aide?

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