ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で選択した要素にオプションをプログラム的に入力するにはどうすればよいですか?

JavaScript で選択した要素にオプションをプログラム的に入力するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-03 05:38:02
オリジナル
984 人が閲覧しました

How to Programmatically Populate a Select Element with Options in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート