I need to add a dropdown list to a webpage. generally the HTML code is like this;
<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 a element like above. after I create this drop down list. I need to add it after a button.
var button = document.getElementById("button1");
and I already get the button element. Also, when the button is clicked, I want to know which option the people have choose in the dropdown list. How can I do that 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 this. select.addChild(option1);
chrome browser give me a error.
Uncaught TypeError: undefined is not a function
It seems that addChild does not work here.
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);
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);}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With