JavaScriptで選択するオプションを追加する

すべてのオプションタグを手動で作成したくないので、このJavaScriptで、id = "mainSelect"を使用したselectで12から100までのオプションを作成します。いくつかのアドバイスをいただけますか？ありがとう

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

簡単なforループでこれを実現できます：

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

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

JS Fiddleデモ。

JS Perfが私のものとSime Vidasの両方の答えを比較しました。彼が私のものよりも少し理解しやすく/直感的に見えると思ったので、それを実装にどのように変換するのか疑問に思いました。Chromium 14 / Ubuntu 11.04によると、私の方がやや高速ですが、他のブラウザ/プラットフォームでは結果が異なる可能性があります。

OPからのコメントに応じて編集：

[どのように]これを複数の要素に適用しますか？

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        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);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

JS Fiddleデモ。

そして、最後に（かなり遅れて...）、関数をメソッドとしてDOMノードHTMLSelectElementにチェーンするためにのプロトタイプを拡張するアプローチpopulate()：

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

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

JS Fiddleデモ。

参照：

• node.appendChild()。
• document.getElementById()。
• element.innerHTML。

どうぞ：

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

ライブデモ： http : //jsfiddle.net/mwPb5/

更新：このコードを再利用したいので、次の関数を使用します。

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

使用法：

initDropdownList( 'mainSelect', 12, 100 );

ライブデモ： http : //jsfiddle.net/mwPb5/1/

最も簡潔で直感的な方法は次のとおりです。

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

名前と値を区別したり、使用する関数にパラメーターを追加してリストの先頭に項目を追加したりすることもできます
。HTMLSelectElement .add（item [、before]）;
新しいオプション（テキスト、値、defaultSelected、選択）;

ループ内でDOM操作を行うことはお勧めしません-大規模なデータセットではコストが高くなる可能性があります。代わりに、私はこのようなことをします：

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

MDNでDocumentFragmentの詳細を読むことができますが、その要点は次のとおりです。

標準のドキュメントと同様に、ノードで構成されるドキュメント構造のセグメントを格納するための軽量バージョンのドキュメントとして使用されます。主な違いは、ドキュメントフラグメントは実際のDOM構造の一部ではないため、フラグメントに加えられた変更がドキュメントに影響を与えたり、リフローを引き起こしたり、変更が加えられたときに発生する可能性のあるパフォーマンスへの影響を引き起こしたりしないことです。

私が避けたいことの1つは、DOM操作をループで実行して、ページの再レンダリングが繰り返されないようにすることです。

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

編集：作成したHTMLを別の選択要素に割り当てる方法を示すために関数を削除し、関数呼び出しを繰り返すことで不要なループを回避しました。

参照：jQueryで配列からの選択にオプションを追加する最良の方法は何ですか？

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 

新しいOptionオブジェクトを作成する場合、渡すパラメーターは2つあります。1つ目はリストに表示するテキスト、2つ目はオプションに割り当てる値です。

var myNewOption = new Option("TheText", "TheValue");

次に、このOptionオブジェクトを空の配列要素に割り当てるだけです。次に例を示します。

document.theForm.theSelectObject.options[0] = myNewOption;

上記の解決策のどれも私にとってうまくいきませんでした。Appendメソッドは、試してもエラーになりませんでしたが、問題は解決しませんでした。最後に、select2のデータプロパティに関する問題を解決しました。私はjsonを使用して配列を取得し、select2要素で初期化しました。詳細については、以下の投稿で私の回答をご覧ください。

https://stackoverflow.com/a/41297283/4928277

多くの場合、関連するレコードの配列がありますが、selectこの方法で記入するのは簡単でかなり宣言的だと思います。

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

これにより、既存のオプションが置き換えられます。代わりに、それらを上部に追加するために
使用できますselectEl.insertAdjacentHTML('afterbegin', str);。
そしてselectEl.insertAdjacentHTML('beforeend', str);、それらをリストの一番下に追加します。

IE11互換の構文：

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');