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>

注意，该值作为第二个参数添加到new Option中

参见:用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。

For(设I = 12;我< 101;我+ +){ 让HTML = "" HTML += ' <选项值= " ${我}" > ${我}> < /选项 ｀ mainSelect。innerHTML += html ｝ const mainSelect = document.getElementById("mainSelect") 这是一种非常简单易懂的解决问题的方法!希望它能起作用:)

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

我要避免的一件事是在循环中执行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');

Edit:删除了该函数，以显示如何将已构建的html分配给另一个选择元素-从而通过重复函数调用避免不必要的循环。