使用 JavaScript 为选择元素生成动态选项

在 Web 开发中，我们经常遇到为选择元素创建动态选项的需要。如果手动完成，这可能是一项耗时的任务，尤其是在处理大量选项时。本文提供了使用 JavaScript 自动执行此过程的解决方案。

使用 For 循环创建选项

一种简单的方法是使用 for 循环来迭代一系列值并动态创建选项元素。例如，要在 ID 为“mainSelect”的 select 元素中生成从 12 到 100 的选项，可以使用以下代码：

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

for (var i = min; i 
此代码初始化最小值和最大值并检索选择元素。然后它进入一个循环来创建选项元素，设置它们的值和innerHTML，并将它们附加到选择元素。
扩展 HTMLSelectElement
另一种方法是扩展 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 
使用此扩展，您可以像这样填充选择元素：
document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});