如何以编程方式添加下拉列表（<select>）？

Question

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

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

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

我怎样才能做到这一点？

原文由 Christos Baziotis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这将起作用（纯 JS，附加到 id 的 div myDiv ）：

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

 var myParent = document.body;

//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";
myParent.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);
}

原文由 tymeJV 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

var cars = [
  "volvo",
  "saab",
  "mercedes",
  "audi"
];

var options_str = "";

cars.forEach( function(car) {
  options_str += '<option value="' + car + '">' + car + '</option>';
});

sel.innerHTML = options_str;

window.onload = function() {
  document.body.appendChild(sel);
};

原文由 7stud 发布，翻译遵循 CC BY-SA 3.0 许可协议