web-dev-qa-db-fra.com

JavaScript pour créer une liste déroulante et obtenir la valeur sélectionnée

Je dois ajouter une liste déroulante à une page Web. Généralement, le code HTML est comme celui-ci;

<select id="au_1_sel" name="au_1_sel" class="searchw8">
    <option value="AU" selected="">method1</option>
    <option value="FI">method2</option>
</select>

Comment puis-je utiliser JavaScript pour créer un élément comme ci-dessus. Après avoir créé cette liste déroulante. Je dois l'ajouter après un bouton.

var button = document.getElementById("button1");

et je reçois déjà l'élément de bouton. De plus, lorsque le bouton est cliqué sur le bouton, je souhaite savoir quelle option les personnes ont choisie dans la liste déroulante. Comment puis-je faire cela en utilisant JavaScript.

J'essaie ceci

var select = document.createElement("select");
select.id = "wayToCalculate";
//select.name="au_1_sel";
//select.class=class="searchw8";

var option1 = document.createElement("option");
option1.value="1";
option1.selected="";
option1.innerHTML= "1";

var option2 = document.createElement("option");
option2.value="2";
option2.innerHTML= "2";

var option3 = document.createElement("option");
option3.value="3";
option3.innerHTML= "3";

select.addChild(option1);
select.addChild(option2);
select.addChild(option3);

$(select).insertAfter(button);

mais quand il s'agit de cela. Sélectionnez.Ajouter (Option1);

le navigateur chrome me donne une erreur.

Uncaught TypeError: undefined is not a function

Il semble que AddChild ne fonctionne pas ici.

javascripthtmldomhtml-select
8
atekul

exemple

[~ # ~] HTML [~ # ~]:

<div id="container">   
    <button id="button1">button1</button>
</div>

JavaScript

var div = document.querySelector("#container"),
    frag = document.createDocumentFragment(),
    select = document.createElement("select");

select.options.add( new Option("Method1","AU", true, true) );
select.options.add( new Option("Method2","FI") );


frag.appendChild(select);
div.appendChild(frag);
10
Chase
var select = document.createElement("select");
select.id = "au_1_sel";
select.name="au_1_sel";
select.class=class="searchw8";

var option1 = document.createElement("option");
option.value="AU";
option.selected="";
option.innerHTML= "method1";

var option2 = document.createElement("option");
option.value="FI";
option.innerHTML= "method2";

select.addChild(option1);
select.addChild(option2);
document.addChild(select);

var button = document.getElementById("button1");
button.onClick=function(){alert(select.options[select.selectedIndex].value);}
4
nicael