[解決済み] 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の変更は一度だけになります。
関連
-
[解決済み] クラス別のjquery onclick
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】カルーセルで画像を中央に配置する方法
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] jQueryがfadeOutで動作しない
-
[解決済み] リーフレット - 既存のマーカーを検索したり、マーカーを削除するには?
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] BootstrapがUncaught Errorを投げる:BootstrapのJavaScriptはjQueryを必要とする【終了】。
-
[解決済み] jQueryの各ループから抜け出すには?
-
[解決済み] asp.net mvcのHtml.BeginForm()にIDプロパティを追加する方法は?
-
[解決済み] JW-Player - アンロードするには?
-
[解決済み] Jquery テーブルの行を隠す