JavaScript を使用した選択要素の動的オプション生成

Web 開発では、選択要素の動的オプションを作成する必要がよく発生します。これを手動で行うと、特に多数のオプションを扱う場合には、時間がかかる可能性があります。この記事では、JavaScript を使用してこのプロセスを自動化するソリューションを提供します。

For ループを使用したオプションの作成

簡単なアプローチの 1 つは、for ループを使用して、さまざまな範囲を反復処理することです。値を指定し、オプション要素を動的に作成します。たとえば、ID が「mainSelect」の select 要素に 12 ～ 100 のオプションを生成するには、次のコードを使用できます。 var max = 100; var select = document.getElementById('mainSelect'); for (var i = min; i

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

for (var i = min; i 
HTMLSelectElement の拡張
別のアプローチは次のとおりです。 HTMLSelectElement のプロトタイプを拡張し、要素を選択するために「populate()」メソッドを直接追加できるようにします。これにより、ポピュレーション関数を DOM ノードにチェーンして、より簡潔な構文を提供できるようになります。
HTMLSelectElement.prototype.populate = function (opts) {
    変数設定 = {};

    設定.min = 0;
    設定.最大 = 設定.最小 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            設定[userOpt] = オプト[userOpt];
        }
    }

    for (var i = settings.min; i 
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({
    「分」: 12、
    「最大」: 40
});