web-dev-qa-db-fra.com

comment ajouter dynamiquement des options à une sélection existante dans Vanilla javascript

Je voudrais ajouter une option à une sélection en utilisant dynamiquement javascript. Tout ce que je pouvais trouver implique JQuery ou tente de créer dynamiquement la sélection. La chose la plus proche que j'ai pu trouver était Ajouter dynamiquement le type d'entrée sélectionné avec des options en Javascript qui fait le dernier choix et qui est le seul que j'ai trouvé qui n'implique pas JQuery. Bien que j'ai essayé de l'utiliser comme ceci:

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

Après cela, il n'y avait aucun changement à sélectionner et l'alerte m'a donné

HELLO WORLD</option'>

Je m'excuse si cela est simple, mais je suis très novice en matière de programmation javascript et Web en général. Merci pour toute aide.

EDIT: J'ai donc essayé les suggestions données comme ça.

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

Cela n'a pas du tout changé la sélection dans la page. Une idée pourquoi? Et j'ai vérifié que le code était en cours d'exécution avec une alerte.

EDIT: L’idée a fonctionné, il s’est avéré qu’elle n’affichait aucune valeur dans la liste déroulante. Je ne sais pas pourquoi mais je peux comprendre cela, je pense.

javascriptselect
42
avorum

Ce tutoriel montre exactement ce que vous devez faire: Ajouter des options à une zone de sélection HTML avec javascript

Fondamentalement:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
76
Drew

Je suppose que quelque chose comme ça ferait le travail.

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
17
intuitivepixel

Utilisez la fonction document.createElement, puis ajoutez-la en tant qu'enfant de votre sélection.

var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);
5
Lochemage

.add () fonctionne aussi.

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(option);

W3 School - try

0
Esteban Lezama

Le moyen le plus simple est:

selectElement.add(new Option('Text', 'value'));

Oui, c'est simple. Et cela fonctionne même dans IE8. Et a d'autres paramètres facultatifs.

Voir docs:
HTMLSelect Element .add (item [ before]);
nouvelle option (texte, valeur, valeur par défaut, sélectionnée);

0
user

Essaye ça;

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.Push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n');
0
user28864