添加选项以使用 javascript 进行选择

Posted 2023-05-07

【中文标题】添加选项以使用 javascript 进行选择

【英文标题】：Adding options to select with javascript

【发布时间】：2012-01-30 06:29:20

【问题描述】：

我希望这个 javascript 在 id="mainSelect" 的选择中创建从 12 到 100 的选项，因为我不想手动创建所有选项标签。你能给我一些指示吗？谢谢

function selectOptionCreate() 

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) 
    line += "<option>";
    line += age + i;
    line += "</option>";
  

  return line;

【问题讨论】：

见***.com/questions/170986/…

投票重新打开，因为链接的“重复”只有基于 jQuery 的答案，而这个需要（或至少暗示需要）纯 JavaScript。

Great answer here: mySelect.options[mySelect.options.length] = new Option('Text 1', 'Value1');

【参考方案1】：

您可以通过一个简单的for 循环来实现这一点：

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++)
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerhtml = i;
    select.appendChild(opt);

JS Fiddle demo.

JS Perf 比较我的和Sime Vidas' answer，运行是因为我认为他看起来比我的更易于理解/直观，我想知道这将如何转化为实施。根据 Chromium 14/Ubuntu 11.04，我的速度要快一些，但其他浏览器/平台可能会产生不同的结果。

---

已编辑以回应 OP 的评论：

[如何] [I] 将其应用于多个元素？

function populateSelect(target, min, max)
    if (!target)
        return false;
    
    else 
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++)
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        
    

// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

JS Fiddle demo.

最后（经过相当长的延迟......），一种扩展 HTMLSelectElement 原型的方法，以便将 populate() 函数作为一种方法链接到 DOM 节点：

HTMLSelectElement.prototype.populate = function (opts) 
    var settings = ;

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) 
        if (opts.hasOwnProperty(userOpt)) 
            settings[userOpt] = opts[userOpt];
        
    

    for (var i = settings.min; i <= settings.max; i++) 
        this.appendChild(new Option(i, i));
    
;

document.getElementById('selectElementId').populate(
    'min': 12,
    'max': 40
);

JS Fiddle demo.

参考资料：

node.appendChild()。 document.getElementById()。 element.innerHTML。

【讨论】：

@Jack：同意，我在后面的编辑中使用了这种方法:)

另外，扩展主机原型（虽然很诱人）被认为是bad idea。

我认为应该更新为使用innerText 而不是innerHTML 以避免跨站点脚本漏洞。 @DavidThomas 你怎么看？

【参考方案2】：

给你：

for ( i = 12; i <= 100; i += 1 ) 
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );

现场演示： http://jsfiddle.net/mwPb5/

---

更新：既然你想重用这段代码，下面是它的函数：

function initDropdownList( id, min, max ) 
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) 
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    

用法：

initDropdownList( 'mainSelect', 12, 100 );

现场演示： http://jsfiddle.net/mwPb5/1/

【讨论】：

如何将其应用于多个元素？

【参考方案3】：

最简洁直观的方法是：

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) 
  selectElement.add(new Option(age));

Your age: <select id="ageselect"><option value="">Please select</option></select>

您还可以区分名称和值，或在列表开头添加项目，并为使用的函数添加附加参数：HTMLSelect​Element​.add(item[, before]);new Option( text, value, defaultSelected, selected);

【参考方案4】：

我不建议在循环中进行 DOM 操作——这在大型数据集中会变得很昂贵。相反，我会这样做：

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() 
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) 
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  
  elMainSelect.appendChild(frag);

您可以在 MDN 上阅读有关 DocumentFragment 的更多信息，但这里是它的要点：

它被用作 Document 的轻量级版本来存储一段 像标准文档一样由节点组成的文档结构。 关键区别在于，因为文档片段不是 实际 DOM 的结构，对片段所做的更改不会影响 文档，导致回流，或招致任何性能影响，可以 发生更改时发生。

【参考方案5】：

我要避免的一件事是在循环中执行 DOM 操作以避免重复重新呈现页面。

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) 
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";


firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

编辑：删除该函数以显示如何将构建的 html 分配给另一个 select 元素 - 从而通过重复函数调用来避免不必要的循环。

【讨论】：

如何将其应用于多个元素？

不确定我是否关注 - 您想为多个选择元素添加相同的选项吗？

是的，我想要具有相同选项的盒子

我将它分解为一个函数，您可以在其中调用您只需传入要附加选项的选择元素的 id。

这就是 documentFragment 的用途。您可以轻松修改接受的答案，以便首先将选项附加到 documentFragment 中，从而防止多次渲染。

【参考方案6】：

见：What is the best way to add options to a select from an array with jQuery?

$('#mySelect')
      .append($('<option>',  value : key )
      .text(value)); 

【参考方案7】：

当你创建一个新的Option对象时，有两个参数需要传递：第一个是你要传递的文本 出现在列表中，第二个是要分配给选项的值。

var myNewOption = new Option("TheText", "TheValue");

然后您只需将此 Option 对象分配给一个空数组元素，例如：

document.theForm.theSelectObject.options[0] = myNewOption;

【参考方案8】：

以上解决方案都不适合我。当我尝试时附加方法没有给出错误，但它没有解决我的问题。最后我用select2的数据属性解决了我的问题。我使用 json 并获取了数组，然后在 select2 元素初始化中将其提供。有关更多详细信息，您可以在下面的帖子中查看我的答案。

https://***.com/a/41297283/4928277

【参考方案9】：

您通常有一系列相关记录，我发现这样填写select 很容易且相当具有声明性：

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

这将替换现有选项。 您可以使用 selectEl.insertAdjacentHTML('afterbegin', str); 将它们添加到顶部。 并selectEl.insertAdjacentHTML('beforeend', str); 将它们添加到列表底部。

IE11 兼容语法：

array.map(function (c)  return '<option value="'+c.id+'">'+c.name+'</option>'; ).join('');