最简洁直观的方式是:

var selectElement = document.getElementById('ageselect'); For (var age = 12;年龄<= 100岁;年龄+ +){ selectElement。添加新选项(年龄)); ｝ 您的年龄:<select id="ageselect"><option value="">Please select</option></select> .

你也可以区分名称和值，或者在列表开头添加附加参数到使用的函数: HTMLSelect Element。添加(项目之前,[]); new Option(text, value, defaultSelected, selected);

以上的方法对我来说都没用。附加方法没有给出错误时，我尝试了，但它没有解决我的问题。最后，我用select2的数据属性解决了我的问题。我使用json，得到数组，然后在select2元素初始化中给出它。要了解更多细节，你可以在下面的帖子中看到我的答案。

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

参见:用jQuery从数组中添加选项的最佳方法是什么?

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

你可以用一个简单的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性能比较我和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()。 . getelementbyid()。 element.innerHTML。

我不建议在循环中进行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的结构，对片段所做的更改不会影响 文档，导致回流，或招致任何性能影响 在进行更改时发生。

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

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

然后你只需将这个Option对象赋值给一个空数组元素，例如:

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