JavaScript 创建下拉列表并获取选定值答案

【问题标题】：JavaScript to create a dropdown list and get the selected valueJavaScript 创建下拉列表并获取选定值
【发布时间】：2014-05-18 05:08:19
【问题描述】：

我需要向网页添加一个下拉列表。一般HTML代码是这样的；

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

我如何使用 JavaScript 创建一个像上面这样的元素。在我创建这个下拉列表之后。我需要在一个按钮之后添加它。

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

我已经得到了按钮元素。此外，当单击按钮时，我想知道人们在下拉列表中选择了哪个选项。如何使用 JavaScript 做到这一点。

我试试这个

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

但是说到这个。 select.addChild(option1);

chrome浏览器给我一个错误。

Uncaught TypeError: undefined is not a function

好像 addChild 在这里不起作用。

【问题讨论】：

你能告诉我们你到目前为止所做的尝试吗？
你的 html 中已经有了这个按钮？
对不起，我搜索了，但没有找到解决方案，所以我在这里发布。是的，我已经拥有的按钮
您的 html 中已经有了按钮？需要用javascript添加吗？

标签： javascript html dom html-select

【解决方案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);

【讨论】：

对不起，我发现你的答案是正确的。我昨天没有测试代码。

【解决方案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);}

【讨论】：

如何理解这个？ select.class = class = "searchw8";