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

Posted 2023-02-16

【中文标题】如何以编程方式添加下拉列表（<select>）？

【英文标题】：How to add Drop-Down list (<select>) programmatically?

【发布时间】：2013-06-04 19:33:29

【问题描述】：

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

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

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

我该怎么做？

【问题讨论】：

查看document.createElement和element.appendChild

@koukouloforos 我的回答有用吗？

@WooCaSh 它可以满足我的要求，但我更喜欢简单的javascript。

@koukouloforos 原因？如果这是一个商业项目，强烈建议使用库。

@JanDvorak 不，我只是在做一些测试。

【参考方案1】：

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

演示：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);

【讨论】：

这是一个奇迹！非 jQuery 解决方案。您可能只想设置属性，而不是使用setAttribute() 设置属性。这并不重要，但使用new Option(text, value) 是创建<option> 元素的一个不错的捷径

@Ian -- 感谢您的提示，仍在学习纯 JS，不幸的是首先学习了 jQuery，试图在纯 JS 中也能做所有事情有点棘手:)

@tymeJV 当然，只是想帮助您改进答案（尽管它很棒）。确实如此，尽管有时您可以在没有 jQuery 的情况下做到这一点时感觉更有价值 :) 供任何人参考 - ***.com/questions/6936071/… 。而且我还没有发现需要使用setAttribute()/getAttribute()，除非您正在使用自定义属性（包括data-*）属性。我知道在使用这些方法时也存在不一致，所以我远离

您也可以使用selectList.add(option)（spec（向上滚动一点）、mdn）添加选项

很久以前 add()/remove() 在不同浏览器中的工作方式不同，所以 ppk 建议不要使用它们。我不知道现在的情况如何。

【参考方案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);
;

【讨论】：

这是最快的解决方案，它适用于大型数据集。

@RomanNewaza，用常规的旧 for 循环替换 forEach 循环检查速度。

作为一个警告，如果选择是使用用户创建的内容生成的，这不是实现选择的安全方式

【参考方案3】：

我很快就制作了一个可以实现这一点的函数，它可能不是最好的方法，但它很简单，应该是跨浏览器的，还请知道我不是 JavaScript 专家，所以任何提示都很棒:)

纯Javascript创建元素解决方案

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 Demo

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

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

这很简单但很棘手，但这是您想要的，希望对您有所帮助： 这个函数生成一个从 1990 年到 2018 年的选择列表 我认为这个例子可以帮助你，如果你想添加任何其他值 改变 x 和 y 的值；）

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

【参考方案7】：

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

【讨论】：

这真的很奇怪，你将 innerHTML 设置为一个数组。你确定这不需要sel.innerHTML = options.join('')

是的，我确定。这是example of the code in action

【参考方案8】：

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

【参考方案9】：

这是一个 ES6 版本，转换为 vanilla 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>

【讨论】：

在这里使用reduce 有点矫枉过正？ map 也适用于 OP 描述的用例。