web-dev-qa-db-fra.com

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

Quel est le moyen le plus simple d’ajouter une option à une liste déroulante à l’aide de jQuery? 

Est-ce que ça va marcher?

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

Cela n'a PAS fonctionné dans IE8 (mais 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);
177
Josh

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 procéder comme suit:

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

Vous pouvez ajouter une option en utilisant la syntaxe suivante. Vous pouvez également visiter la page option de gestion du chemin 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));

107
Dipu

Si le nom ou la valeur de l'option est dynamique, vous ne voudrez plus vous inquiéter d'échapper des caractères spéciaux; en cela, 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');
44
bobince

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>

33
Abrar Jahin

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

18
Ashish

Ça marche bien. 

Si vous ajoutez plus d’un élément d’option, je vous recommande d’effectuer l’ajout une fois plutôt que de le faire sur chaque élément.

18
Russ Cam

Pour améliorer les performances, essayez de ne modifier le DOM qu'une seule fois, encore 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);
14
John Magnolia

J'aime utiliser l'approche non jquery:

mySelect.add(new Option('My option', 1));
12
caiohamamura
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
11
szpapas

Vous pouvez ajouter des options de manière dynamique dans la liste déroulante, comme indiqué dans l'exemple ci-dessous. Ici, dans cet exemple, j'ai pris des données de tableau et lié ces valeurs de tableau à la liste déroulante, comme indiqué dans la capture d'écran de sortie.

Sortie:

 enter image description here 

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>

11
GSB

Aucune réponse n’est mentionnée, mais utile lorsque 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);
9
Eduard Florinescu
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));
});
8
Salim

Ces choses très simples . Vous pouvez le faire de cette façon

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

ou

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

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

Premier:

$('#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));
});
4
Dulith De Costa

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

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" en tant que 3ème élément de la sélection.

3
ATOzTOA

Nous avons rencontré un problème lorsque vous ajoutez une option et utilisez jquery validate . Vous devez cliquer sur un élément de 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

 https://i.stack.imgur.com/HOjIY.png

3
Peang Peang

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

Ceci est juste un rapide points pour une meilleure performance

toujours lorsque vous avez affaire à de nombreuses options, construisez une grosse chaîne, puis ajoutez-la à la sélection pour une meilleure performance

f.g.

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');
2
Hatim
$('#select_id').append($('<option>',{ value: v, text: t }));
1
Cris

C’est comme cela que je l’ai fait, avec un bouton pour ajouter chaque étiquette de sélection.

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

U peut essayer ci-dessous le code pour ajouter à l'option 

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

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

Vous pouvez le faire dans ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });
1
idiglove
$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Si vous obtenez des données d'un objet, transmettez-le simplement pour qu'il fonctionne ...

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

Name et Id sont des noms de propriétés d'objet ... afin que vous puissiez les appeler comme bon vous semble ... Et bien sûr, si vous avez Array ... vous voulez créer une fonction personnalisée avec pour boucle ... document prêt ... A la vôtre

1
mr. Panzerman

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

Je pense une meilleure façon:

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

Sur la base de la réponse de dule pour ajouter une collection d’articles, un one-liner for...in fonctionnera également à merveille:

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

0
CPHPython

Si quelqu'un vient ici chercher 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 de data - version ajoutée 1.2.3

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