Ajouter des options à un <select> en utilisant jQuery?

Quelle est la façon la plus simple d'ajouter un optionà une liste déroulante à l'aide de jQuery?

Est-ce que ça va marcher?

$("#mySelect").append('<option value=1>My option</option>');

Cela n'a PAS fonctionné dans IE8 (mais l'a fait dans FF):

$("#selectList").append(new Option("option text", "value"));

Ce travail DID:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Personnellement, je préfère cette syntaxe pour ajouter des options:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

Si vous ajoutez des options à partir d'une collection d'éléments, vous pouvez effectuer les opérations suivantes:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

Vous pouvez ajouter une option en utilisant la syntaxe suivante, vous pouvez également visiter l' option de traitement de manière dans jQuery pour plus de détails.

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Si le nom ou la valeur de l'option est dynamique, vous ne voudrez pas vous soucier de lui échapper des caractères spéciaux; dans ce cas, vous préférerez peut-être des méthodes DOM simples:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Option 1-

Vous pouvez essayer ceci-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Comme ça-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Option 2-

Ou essayez ceci-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Comme ça-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

C'est très simple:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

ou

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Ça marche bien.

Si vous ajoutez plusieurs éléments d'option, je recommanderais d'effectuer l'ajout une fois plutôt que d'effectuer un ajout sur chaque élément.

pour une raison quelconque, faire $("#myselect").append(new Option("text", "text"));ne fonctionne pas pour moi dans IE7 +

Je devais utiliser $("#myselect").html("<option value='text'>text</option>");

Pour améliorer les performances, essayez de ne modifier le DOM qu'une seule fois, d'autant plus si vous ajoutez de nombreuses options.

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

J'aime utiliser une approche non jquery:

mySelect.add(new Option('My option', 1));

Vous pouvez ajouter des options dynamiquement dans la liste déroulante comme indiqué dans l'exemple ci-dessous. Ici, dans cet exemple, j'ai pris les données du tableau et lié ces valeurs au tableau déroulant comme indiqué dans la capture d'écran de sortie

Production:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Non mentionné dans une réponse mais utile dans le cas où vous souhaitez que cette option soit également sélectionnée, vous pouvez ajouter:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Il y a deux façons. Vous pouvez utiliser l'un des deux.

Première:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Seconde:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

Si vous souhaitez insérer la nouvelle option à un index spécifique dans la sélection:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

Cela insérera le "Nouvel élément" comme 3e élément dans la sélection.

Vous pouvez ajouter et définir l'attribut Value avec du texte:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Nous avons trouvé un problème lorsque vous ajoutez une option et utilisez jquery validate. Vous devez cliquer sur un élément dans la liste de sélection multiple. Vous allez ajouter ce code pour gérer:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Que dis-tu de ça

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);

Ce ne sont que quelques points rapides pour de meilleures performances

toujours lorsque vous avez affaire à de nombreuses options, créez une grande chaîne, puis ajoutez-la au "select" pour de meilleures performances

fg

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Même plus vite

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Si vous obtenez des données d'un objet, transférez simplement cet objet pour qu'il fonctionne ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Le nom et l'id sont des noms de propriétés d'objet ... vous pouvez donc les appeler comme bon vous semble ... Et bien sûr, si vous avez un tableau ... vous voulez créer une fonction personnalisée avec pour la boucle for ... document prêt ... Santé

Basé sur la réponse de dule pour avoir ajouté une collection d'articles, un doublurefor...in fera également des merveilles:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Les valeurs d'objet et les index sont affectés aux options. Cette solution fonctionne même dans l'ancien jQuery (v1.4) !

si vous avez optgroup dans select , vous avez une erreur dans DOM.

Je pense que le meilleur moyen:

$("#select option:last").after($('<option value="1">my option</option>'));

Vous pouvez essayer le code ci-dessous pour ajouter à l'option

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

$('#select_id').append($('<option>',{ value: v, text: t }));

C'est ainsi que je l'ai fait, avec un bouton pour ajouter chaque balise de sélection.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Vous pouvez le faire dans ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Si quelqu'un vient ici à la recherche d'un moyen d'ajouter des options avec des propriétés de données

Utiliser attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Utilisation des données - version ajoutée 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);