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 中国語 Web サイトの他の関連記事を参照してください。