JavaScript to create a drop-down list and get the selected value

Question

I need to add a dropdown to a webpage. usually the HTML is as follows:

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

How can I use JavaScript to create an element as above. after creating this drop down list. I need to add it after the button.

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

and I already got the button element. Also, when the button is clicked, I want to know which option to select from the drop-down list. How can I do this using JavaScript.

I try this

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

but when it comes to that. select.addChild (option1);

Chrome browser gives me an error.

 Uncaught TypeError: undefined is not a function 

It seems that addChild is not working here.

Answer 1

Example

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

Answer 2

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