1. ホーム
  2. javascript

[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?

2022-03-15 20:03:10

質問

にオプションを追加する場合、どのような方法が最適でしょうか? <select> をJavaScriptオブジェクトからjQueryを使用して作成できますか?

プラグインを使わなくてもできるものを探しているのですが、プラグインがあるのも気になります。

こんな感じです。

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

クリーンでシンプルなソリューションです。

これは、クリーンアップされ、簡素化された のバージョンです。 :

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

matdumsaさんからの変更点。(1) append() 内のオプションの close タグを削除。 (2) property/attributes を append() の第2引数として map に移動。

解決方法は?

他の回答と同じで、jQueryの方法で。

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});