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

您可以通过一个简单的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小提琴演示。

JS Perf 比较了我和 Sime Vidas 的答案，因为我认为他看起来比我的更容易理解/直观，我想知道这将如何转化为实现。根据Chromium 14/Ubuntu 11.04的说法，我的速度要快一些，其他浏览器/平台可能会有不同的结果。

根据OP的评论编辑：

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

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小提琴演示。

最后(经过相当长的延迟...(，一种扩展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小提琴演示。

引用：

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

最简洁直观的方法是：

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>

您还可以区分名称和值，或者在列表开头添加项目，并为使用的函数添加附加参数：
HTMLSelectElement.add(item[， before](;
新选项(文本、值、默认选择、已选择(;

你来了：

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/

我不建议在循环中进行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的信息，但这是它的要点：

它被用作文档的轻量级版本来存储一段 由节点组成的文档结构，就像标准文档一样。 主要区别在于，因为文档片段不是 实际DOM的结构，对片段所做的更改不会影响 文档，导致重排，或产生任何性能影响 在进行更改时发生。

我要避免的一件事是在循环中执行 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 元素 - 从而通过重复函数调用来避免不必要的循环。

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

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

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

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

请参阅：使用 jQuery 从数组中选择选项的最佳方法是什么？

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

var selectElement = document.getElementById('ageselect');
for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age, age));
}

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

请注意，该值已作为第二个参数添加到新选项

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

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

通常您有一组相关记录，我发现以这种方式填充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('');

for (let i = 12; i< 101; i++){
    let html = ""
    html += `
        <option value="${i}">${i}</option>
    `
    mainSelect.innerHTML += html
}

const mainSelect = document.getElementById("mainSelect")