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

73

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

可以说我想添加一个带有四个选项的下拉列表：

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

我怎样才能做到这一点？

javascript  html  drop-down-menu  html-select 
— 克里斯托斯·巴齐奥蒂斯（Christos Baziotis）
source
2
外观成document.createElement和element.appendChild
— 伊恩
@koukouloforos对我的回答有帮助吗？
— WooCaSh
2
@WooCaSh它确实满足我的要求，但我更喜欢简单的javascript语言。
— Christos Baziotis 2013年
@koukouloforos原因？如果这是一个商业项目，则强烈建议使用图书馆。
— John Dvorak
@JanDvorak不，我只是在做一些测试。
— Christos Baziotis 2013年

Answers:

190

这将起作用（纯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);
}
展开摘要

— tyme合资公司
source
18
这是一个奇迹！非jQuery解决方案。您可能只想设置属性，而不是使用属性setAttribute()。并没有关系，但是使用new Option(text, value)是创建<option>元素的一个很好的捷径
— Ian
3
@Ian-感谢您的提示，仍在学习纯JS，不幸的是首先学习了jQuery，试图同时也能在纯JS中完成所有操作有些棘手:)
— tymeJV 2013年
@tymeJV当然，只是试图帮助改善您的答案（尽管如此）。虽然确实很正确，但是有时候在没有jQuery的情况下感觉更有意义：)供任何人参考-stackoverflow.com/questions/6936071/…。除非您正在使用自定义属性（包括）属性，否则我没有发现需要使用setAttribute()/ 。我知道在使用这些方法时也会出现不一致的情况，所以我就远离了getAttribute()data-*
— Ian
4
您还可以使用selectList.add(option)（spec（向上滚动），mdn）
— Zirak
很久以前，add（）/ remove（）在不同的浏览器中的工作方式有所不同，因此ppk建议不要使用它们。我不知道目前的状况。
— 2013年
12 
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
source
这是最快的解决方案，适用于大型数据集。
— 罗曼·纽瓦萨
2
@RomanNewaza，检查速度，将forEach循环替换为常规的旧for循环。
— 2015年
1
就像警告一样，如果选择是由用户创建的内容生成的，则这不是实现选择的安全方法
— r0m4n
4

我已经快速创建了一个可以实现此目标的函数，它可能不是实现此目标的最佳方法，但它确实可以工作并且应该是跨浏览器的，请注意我不是JavaScript方面的专家，所以任何技巧都很棒:)

纯Java脚本创建元素解决方案

function createElement(){
    var element  = document.createElement(arguments[0]),
        text     = arguments[1],
        attr     = arguments[2],
        append   = arguments[3],
        appendTo = arguments[4];

    for(var key = 0; key < Object.keys(attr).length ; key++){
        var name = Object.keys(attr)[key],
             value = attr[name],
             tempAttr = document.createAttribute(name);
             tempAttr.value = value;
        element.setAttributeNode(tempAttr)
    }
    
    if(append){
        for(var _key = 0; _key < append.length; _key++) {
            element.appendChild(append[_key]);
        }
    }

    if(text) element.appendChild(document.createTextNode(text));

    if(appendTo){
        var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
        target.appendChild(element)
    }       

    return element;
}

让我们看看我们如何做到这一点

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

它是这样的

    var options = [
        createElement('option', 'Volvo', {value: 'volvo'}),
        createElement('option', 'Saab', {value: 'saab'}),
        createElement('option', 'Mercedes', {value: 'mercedes'}),
        createElement('option', 'Audi', {value: 'audi'})
    ];


    createElement('select', null, // 'select' = name of element to create, null = no text to insert
        {id: 'Select1', name: 'drop1'}, // Attributes to attach
        [options[0], options[1], options[2], options[3]], // append all 4 elements
        'body' // append final element to body - this also takes a element by id without the #
    );

这是参数

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');

如果您必须附加许多元素，则此功能适用，如果有任何方法可以改善此答案，请告诉我。

编辑：

这是一个工作演示

JSFiddle演示

可以高度定制以适合您的项目！

— iConnor
source
3

此代码将动态创建一个选择列表。首先，我用汽车名称创建一个数组。其次，我动态创建一个select元素，并将其分配给变量“ sEle”，并将其附加到html文档的正文中。然后，我使用一个for循环遍历数组。第三，我动态创建option元素并将其分配给变量“ oEle”。使用if语句，我将属性'disabled'和'selected'分配给第一个选项元素[0]，以便始终选择它并将其禁用。然后，我创建一个文本节点数组“ oTxt”以附加数组名称，然后将文本节点附加到option元素，该元素随后附加到select元素。

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];

var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);

for (var i = 0; i < array.length; ++i) {
  var oEle = document.createElement('option');

  if (i == 0) {
    oEle.setAttribute('disabled', 'disabled');
    oEle.setAttribute('selected', 'selected');
  } // end of if loop

  var oTxt = document.createTextNode(array[i]);
  oEle.appendChild(oTxt);

  document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop
展开摘要

— 用户名
source
2

这是7stud提供的答案的ES6版本。

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

const cars = [
  "Volvo",
  "Saab",
  "Mercedes",
  "Audi",
];

const options = cars.map(car => {
  const value = car.toLowerCase();
  return `<option value="${value}">${car}</option>`;
});

sel.innerHTML = options;

window.onload = () => document.body.appendChild(sel);
— 凯文·厄斯特基尔德
source
确实很奇怪，您正在将innerHTML设置为数组。您确定不需要sel.innerHTML = options.join('')
— 吗
是的，我确定。这是运行中的代码示例
— KevinØsterkilde20年
1 
const countryResolver = (data = [{}]) => {
    const countrySelecter = document.createElement('select');
    countrySelecter.className = `custom-select`;
    countrySelecter.id = `countrySelect`;
    countrySelecter.setAttribute("aria-label", "Example select with button addon");

    let opt = document.createElement("option");
    opt.text = "Select language";
    opt.disabled = true;
    countrySelecter.add(opt, null);
    let i = 0;
    for (let item of data) {
        let opt = document.createElement("option");
        opt.value = item.Id;
        opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
        countrySelecter.add(opt, null);
    }
    return countrySelecter;
};
— Aliaksandr Shpak
source
1

这是ES6版本，向原始JS的转换不应该太难，但无论如何我已经有了jQuery：

function select(options, selected) {
  return Object.entries(options).reduce((r, [k, v]) => r.append($('<option>').val(k).text(v)), $('<select>')).val(selected);
}
$('body').append(select({'option1': 'label 1', 'option2': 'label 2'}, 'option2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
展开摘要

— chx
source
使用reduce是有点矫枉过正这里是吗？map对于OP描述的用例，A的效果也很好。
— 凯文·Østerkilde20年
0 

const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];

let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);


for (const i in cars) {
  let optionSelect = document.createElement('option');

  let optText = document.createTextNode(cars[i]);
  optionSelect.appendChild(optText);

  document.getElementsByTagName('select')[0].appendChild(optionSelect);
}
展开摘要

— 耶稣·奎斯塔
source
0

这很简单但是很棘手，但是这正是您想要的，希望对您有所帮助： 此函数会生成一个从1990到2018的选择列表。 ）

function dropDown(){
    var start = 1990;
    var today = 2019;
    document.write("<select>");
    for (var i = start ; i <= today; i++)
    document.write("<option>" + i + "</option>");
}
document.write("</select>");

dropDown();
— 卡南人
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.