使用 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
});