jQueryでJavaScriptオブジェクトとしてselect fromにオプションを追加する最良の方法は何ですか?


1380

<select>jQueryを使用してJavaScriptオブジェクトからにオプションを追加する最良の方法は何ですか?

プラグインが必要ないものを探していますが、そこにあるプラグインにも興味があります。

これは私がやったことです:

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

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

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

これは、matdumsaのクリーンアップおよび簡略化されたバージョンです

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

matdumsaの変更点:(1)append()内のオプションの終了タグを削除し、(2)プロパティ/属性をappend()の2番目のパラメーターとしてマップに移動しました。


4
多分助け:texotela.co.uk/code/jquery/select(私がこの質問に
出くわした

2
上記のクリーンアップバージョンは、Jquery 1.4以降でのみ機能します。古いバージョンについては、matdumsaの答えの1つを使用してください
Thedric Walker '25

{value:key}は、matdumsaの回答にあるように{"value":key}である必要があります。
Nick P

以来、私はそうは思わないvalue、それは引用符で囲む必要はありません文字列(およびハードコードされた)です。
ダリルハイン2014年

1
タイトルは、「jQueryを使用してJSONオブジェクトからの選択にオプションを追加する最良の方法は何ですか?
Dr Fred

回答:


1383

他の回答と同じように、jQuery形式で:

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

99
最初に変数に代入$("#mySelect")します。そうしないと$("#mySelect")、DOMの更新のように、ループ内で毎回呼び出すのは非常に無駄です。artzstudio.com/2009/04/jquery-performance-rules/…の
Patrick

7
まあ、あなたはvar mySelect = $("#mySelect") outside of the それぞれの `ループを行うことができます。それははるかに効率的です。以下のカールの回答を参照してください
Patrick

17
より良いjQueryスタイルのための私の推奨:$( '#mySelect').append($( "<option />").val(key).text(value));
FAjir 2014年

10
この回答の人気により、ループ内でのDOM更新を回避する必要があることに言及する価値があります。jsperf.com/jquery-append-array-vs-string
jthomas

6
この回答は間違った意図のために非常に誤解を招くものでした... attrそしてtext実際は$('<option/>')-objectのメソッドです
phil294

268
var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

このようにして、「DOMに触れる」ことは一度だけです。

最新の行を$( '#mySelect')。html(output.join( ''))に変換できるかどうかはわかりません。jQueryの内部がわからないためです(おそらくhtml()で解析されます)。方法)


20
あなたのメソッドは、jQueryの使用量も少ないため、上記の「正解」よりも明らかに高速です。
Teej 2009年

4
「$( '#mySelect')。get(0).innerHTML = output.join( '');」という行 ChromeとFF3.xで動作しますが、IE7では動作しません
blu

19
key引用符が含まれている場合、または引用符が含まれている場合、これは壊れ>, <ます。
nickf

3
そして、私が失いたくない2つのオプションがある場合。これらの新しいオプション値を既存のオプション値に追加するにはどうすればよいですか?
VansFannel 2011

6
小さな改善の1つは、次のように、プラス記号ではなく結合を使用して連結することです。output.push( '<option value = "'、key、 '">'、value、 '</ option>');
MM。

202

これは少し高速でクリーンです。

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>


3
完璧です。これを追加するには、selectの追加属性を追加できます。$ .each(selectValues、function(id、value、text){$( '#mySelect')。append($( "<option />"、{id:id value:value、text:text}));} );
idok 2013

45
`$( '#mySelect')`をキャッシュして、ループの前に一度だけルックアップするのが良い考えだと思います。現在、すべてのオプションの要素をDOMで検索しています。
Sushanth-2013年

@ Sushanth--セットが小さい場合、これはパフォーマンスへの大きな影響ですか?
ckarbass 2013年

3
@ckarbass-DOMの大きさによって異なります。変数に割り当てるための潜在的に大きくて非常に少ない労力であり、SOでコメントを書くよりもかなり少ないです。
Nick H247

97

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

バニラJavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

4
これOptionまでにそのオブジェクトについて聞いたことがない。それはすべてのブラウザに組み込まれていますか?
ダリル・ハイン

2
を使用new Optionしてみましたが、IE6および7では機能しないことがわかりました。理由はわかりませんが、jQueryの完全なオプションの多くが機能しました。
ダリルハイン2011

選択範囲を追加するのにも良い方法です。 new Option('display', value, true)
ボートコーダー、2011

Mark0978実際の@ new Option('display', value, true, true)javascriptkit.com/jsref/select.shtml
カール・Hörberg


31

これは見栄えがよく、読みやすくなりますが、他の方法よりも遅くなります。

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

速度が必要な場合は、これが最速の(テスト済み!)方法です。文字列連結ではなく配列を使用し、追加呼び出しを1つだけ使用します。

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

これは、すべてのオプションが最後に1つとして結合されるため、配列に挿入する前にすべてのオプションの構成要素を連結するのではなく、個々の配列項目としてさまざまな文字列部分を挿入することを「最速」の方法が意味するのではないですか?
bitoolean

22

古い@joshperryの回答の改良

プレーンな.appendも期待どおりに機能するようですが、

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

またはより短い、

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

または、次のこと$.weakmapを許可するために使用できますかGC
Chef_Code

2
エレガンスのためのボーナスポイント:オブジェクトの配列を正しく追加するmap()ためのプロパティと組み合わせた構成を適切に使用しappend()ます!
Jochem Schulenklopper 2017

@joshperry技術的な修正/更新を期待していたので、少しがっかりです。
Сухой27

20

これらすべての答えは不必要に複雑に見えます。あなたに必要なのは:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

それは完全にブラウザー間で互換性があります。


それでいいのnew Option(value, key);パラメータの順序は、オプション(text_visible_part、value_behind_the_scenes)です。
Bob Stein

アレイプッシュはブラウザーに互換性がありませんか?次に、配列のプッシュがより読みやすい場合、これは不必要に複雑ではないですか?
bitoolean

18

注意してください... Android 2.2(Cyanogen 7.0.1)電話(T-Mobile G2)でPhoneGap 1.0.0を備えたjQuery Mobile 1.0b2を使用しており、.append()メソッドをまったく動作させることができませんでした。次のように.html()を使用する必要がありました。

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

18
 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

私はいくつかのテストを実行しましたが、これが仕事を最速で行うと信じています。:P


1
.eachは、同じ結果を得る他の方法と比較して非常に遅いです。これは私が考えていたものであり、このアプローチをお勧めします。
Allen Tellez

ここでのバリエーションの90%が$ .each()を使用しているのは残念です。for()ループは、コンパクトではない場合でも、より多くの制御とパフォーマンスの利点を提供します。
HoldOffHunger 2017

15

Microsoftテンプレートアプローチを使用するアプローチがあります。jQueryコアへの組み込みを現在提案中のをます。テンプレートを使用するとより強力になるため、最も単純なシナリオでは、それは最良のオプションではない可能性があります。詳細については、Scott Guの機能の概要の投稿を参照してください。

まず、githubから入手できるテンプレートjs​​ファイルを含めます。

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

次にテンプレートを設定する

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

次に、データを使用して.render()メソッドを呼び出します

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

私がしましたブログより詳細にこのアプローチを。


12

私はAjaxを介してドロップダウン項目をロードして、このようなものを作りました。上記の応答も許容されますが、パフォーマンスを向上させるために、DOMの変更をできるだけ少なくすることは常に良いことです。

したがって、ループ内に各アイテムを追加するのではなく、ループ内でアイテムを収集し、完了したら追加することをお勧めします。

$(data).each(function(){
    ... Collect items
})

追加します

$('#select_id').append(items); 

またはさらに良い

$('#select_id').html(items);

$( '#select_id')。html(items); appendを使用すると、すべてのonchangeイベントで項目が追加され続けます。どうもありがとうございます。
Dipanwita Das 2017

10

簡単な方法は次のとおりです。

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

オプションリストは既に作成しているので、選択フィールドへの入力は、Willardが言うように簡単でした。
Loony2nz 2011

10

他のほとんどの答えは、each関数を使用して反復しますselectValuesます。これには、要素ごとに追加が呼び出され、それぞれが個別に追加されたときにリフローがトリガーされる必要があります。

この答えをより慣用的な関数メソッド(最新のJSを使用)に更新すると、マップと要素コンストラクターを使用して作成された要素のappend配列をoption使用して、1回だけ呼び出すように形成できます。Option

OptionDOM要素を使用するoptionと、作成後に要素を更新する必要がなく、jQueryの解析ロジックを実行する必要がないため、関数呼び出しのオーバーヘッドを削減できます。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

オプションオブジェクトを新しくするファクトリユーティリティ関数を作成すると、これをさらに簡略化できます。

const newoption = (...args) => new Option(...args)

次に、これを直接提供できますmap

$('mySelect').append($.map(selectValues, newoption))

以前の処方

appendまた、可変数の引数として値を渡すことができるため、を使用して、option要素マップのリストを事前に作成し、1回の呼び出しでそれらを引数として追加できますapply

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

jQueryの以降のバージョンでappendは、配列引数も受け入れられるように見えますが、これは多少簡略化できます。

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

10
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

jQuery 1.4.1で正常に動作します。

ASP.NET MVCとjQueryで動的リストを使用するための完全な記事については、以下をご覧ください。

MVCとjQueryを使用した動的選択リスト


8

Chrome(jQuery 1.7.1)のこのソリューションには並べ替えの問題があります(Chromeは名前/番号でオブジェクトのプロパティを並べ替えますか?)したがって、順序を維持するために(はい、オブジェクトの誤用です)、これを変更しました:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

これに

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

$ .eachは次のようになります。

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

8

どこでも同じコードを繰り返すのではなく、次のような独自のjQuery関数を作成する方が望ましいと思います。

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

次に、オプションを追加するには、次のようにします。

$('select').addOption('0', 'None');

詳しく説明してもらえますか?
2016年

7

次のコードでjson配列を反復することができます

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");


7

前の回答はすべて有効な回答ですが、これらすべてを最初にdocumentFragmnetに追加し、その後にそのドキュメントフラグメントを要素として追加することをお勧めします...

この問題に関するジョン・レジグの考えを見てください...

以下に沿ったもの:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

7
  1. $.each より遅い forループ
  2. 毎回、DOM選択はループのベストプラクティスではありません $("#mySelect").append();

したがって、最善の解決策は次のとおりです

JSONデータresp

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

それをそのまま使う

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

6

それを行うさらに別の方法:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

私はあなたがここで何をしたか見...あなたはキャッシュにアドバイスを取った$('#mySelect')後、リファクタリング@rocktheroadの答えを...これは、より現実的な解決策が何であれ、
Chef_Code

6
if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

これは、最初に巨大な文字列を構築した後で一度だけDOMを操作します。


あなたはこれをさらに最適化し、完全に置き換えることによって、jQueryの使用を避けることができる$("#myselect").empty().append(opts);getElementById('myselect').innerHtml = opts;
vahanpwns

6

それが私が2次元配列で行ったことです。最初の列はアイテムiで、の追加先innerHTMLです<option>。2列目には、私は、に追加RECORD_IDされるvalue<option>

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
  2. JavaScript / Ajax

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }

いいね。jQueryを使用していないのは残念です。また、select.options.add()メソッドで以前に問題がありました。どのブラウザーと正確な問題を思い出せませんが、私はそこから一歩進んでjQueryに違いを処理させることにしました。
ダリル・ハイン

PHPとJQuerryを使用して完全にnoobですが、上記のコードはすべてのブラウザーで機能します。唯一の問題-それはiPhone上でうまく機能していないが、私はそれについて、運これまで:(質問を投稿stackoverflow.com/questions/11364040/...
塩辛い


5

これはシンプルでうまく機能することがわかりました。

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

4

JSON形式:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

そして、Ajax成功時にドロップダウンに値を入力するjQueryコード:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

3

$ .map()関数を使用すると、これをよりエレガントな方法で実行できます。

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

それは少し短いですが、1つの問題は、受け入れられた回答が行うvalおよびkey varのエスケープを処理することです。
ダリルハイン2017

2
<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

2

HTML選択IDを次の行に設定します。ここでmySelectは、select要素のidとして使用されます。

   var options = $("#mySelect");

次に、このシナリオではselectValuesであるオブジェクトを取得し、それを各ループのjqueryに設定します。オブジェクトの値とテキストを適宜使用し、次のようにオプション選択に追加します。

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

これにより、ドロップダウンリストが選択されたときにオプションリストとしてテキストが表示され、テキストが選択されると、選択されたテキストの値が使用されます。

例えば。

"1": "テスト1"、 "2": "テスト2"、

落ちる、

表示名:テスト1->値は1表示名:テスト2->値は2


ソリューションについて少し説明してください。
Vinay Prajapati

2

実際、パフォーマンスを向上させるには、オプションリストを個別に作成し、選択IDに追加することをお勧めします。

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.