如何以编程方式添加下拉列表（< select>）？ [英] How to add Drop-Down list (<select>) programmatically?

问题描述

我想创建一个函数，以编程方式在页面上添加一些元素。

假设我想添加一个包含四个选项的下拉列表：

 < select name =drop1id =Select1> 
< option value =volvo>沃尔沃< / option> 
< option value =saab> Saab< / option> 
< option value =mercedes> Mercedes< / option> 
< option value =audi> Audi< / option> 
< / select> 
  

我该怎么做？

解决方案

这将工作（纯JS，附加到ID myDiv 的div）：

  var myDiv = document.getElementById（myDiv）; 
 
 //创建要添加的选项数组
 var array = [Volvo，Saab，Mercades，Audi]; 
 
 //创建并附加选择列表
 var selectList = document.createElement（select）; 
 selectList.id =mySelect; 
 myDiv.appendChild（selectList）; 
 
 //创建并附加选项
 for（var i = 0; i< array.length; i ++）{
 var option = document.createElement（option ）; 
 option.value = array [i]; 
 option.text = array [i]; 
 selectList.appendChild（option）; 
} 
  

演示：http://jsfiddle.net/4pwvg/

I want to create a function in order to programmatically add some elements on a page.

Lets say I want to add a drop-down list with four options:

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

How can I do that?

解决方案

This will work (pure JS, appending to a div of id myDiv):

var myDiv = document.getElementById("myDiv");

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myDiv.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}

Demo: http://jsfiddle.net/4pwvg/

这篇关于如何以编程方式添加下拉列表（< select>）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！