如何以编程方式在 JavaScript 中使用选项填充选择元素？

使用 JavaScript 添加选项

扩展所提供的函数，让我们探索几种方法来创建具有一系列值的选项并添加将它们添加到 ID 为“mainSelect”的选择元素：

方法 1：

此方法引入了改进的 for 循环，可以以编程方式在所需范围内创建选项：

<code class="javascript">var min = 12;
var max = 100;
var select = document.getElementById('mainSelect');

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

方法 2（重构）：

为了简化和增强可读性，您可以创建一个函数来处理此过程：

<code class="javascript">function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0;
        var max = max || min + 100;

        var 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);
        }
    }
}</code>

方法 3（链接）：

最后，您可以使用“populate”方法扩展 HTMLSelectElement 原型：

<code class="javascript">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));
    }
};</code>

以上是如何以编程方式在 JavaScript 中使用选项填充选择元素？的详细内容。更多信息请关注PHP中文网其他相关文章！