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

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

Je suis d'accord avec Ashish, cela n'a PAS fonctionné dans IE8 (encore 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); 

Vous pouvez ajouter une option à l'aide de la syntaxe suivante, vous pouvez également visiter l' option handle handle dans jQuery pour plus de détails.

1. $ ('Select'). Append ($ ('', {value: 1, text: 'One'}));

2. $ ('Select'). Append ('One');

3. Var option = new Option (texte, valeur); $ ('Select'). Append ($ (option));

Si le nom ou la valeur de l'option est dynamique, vous ne voudrez pas vous soucier d'échapper à des caractères spéciaux; Dans ce cas, vous pouvez préférer les 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> 

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

J'ai dû utiliser $("#myselect").html("<option value='text'>text</option>");

Cela fonctionne bien.

Si vous ajoutez plus d'un élément d'option, je recommanderais d'exécuter l'ajout une fois par opposition à l'exécution d'une annexe sur chaque élément.

Pour aider les performances, vous devriez essayer de modifier uniquement le DOM une fois, plus encore 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 l'approche non jquery:

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

Si vous souhaitez que l'option soit sélectionnée, il est tout aussi simple que:

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

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

Non mentionné dans une réponse mais utile est 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); 

Vous pouvez ajouter des options dynamiquement dans la liste déroulante comme indiqué 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:

 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> 

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

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

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 le 3ème élément dans le choix.

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

Si vous avez sélectionné optgroup à l' intérieur, vous avez une erreur dans DOM.

Je pense une meilleure façon:

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

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

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