JavaScript创建一个下拉列表并获取选定的值 [英] JavaScript to create a dropdown list and get the selected value

问题描述

我需要为网页添加下拉列表。
通常HTML代码是这样的;

 < select id =au_1_selname =au_1_selclass = searchw8 > 
< option value =AUselected => 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不是函数
  

似乎addChild不会在这里工作。

解决方案

示例

$ b

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（新选项（Method1，AU，true，true））; 
 select.options.add（新选项（Method2，FI））; 
 
 
 frag.appendChild（select）; 
 div.appendChild（frag）; 
  

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

这篇关于JavaScript创建一个下拉列表并获取选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！