1. ホーム
  2. jquery

[解決済み] jQueryを使用してDropDownListにオプションを追加するにはどうすればよいですか?

2022-03-29 16:57:45

質問

質問にあるように、jQueryを使用してDropDownListに新しいオプションを追加するにはどうすればよいですか?

ありがとうございます

解決方法は?

追加プラグインを使用しない。

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

オプションがたくさんある場合や、このコードを頻繁に実行する必要がある場合には DocumentFragment 不必要に何度もDOMを修正する代わりに。ほんの一握りのオプションしかない場合は、その価値はないでしょうけど。

------------------------------- Added --------------------------------

DocumentFragment は速度向上のための良いオプションですが、option 要素を作るには document.createElement('option') IE6とIE7が対応していないためです。

私たちができることは、新しいselect要素を作成し、すべてのオプションを追加することです。ループが終了したら、それを実際のDOMオブジェクトに追加します。

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

こうすることで、DOMの変更は一度だけになります。