如何以程式設計方式在 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中文網其他相關文章！