web-dev-qa-db-ja.com

JQueryでJSオブジェクトとしてselect fromにオプションを追加するための最良の方法は何ですか？

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

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

これは私がしたことです：

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番目のパラメータとしてプロパティ/属性をマップに移動しました。

javascriptjqueryarrayshtml-select
1300
Darryl Hein

JQueryの方法で、他の答えと同じ：

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});
1292
matdumsa
var output = [];

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

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

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

最新の行を$（ '＃mySelect'）に変換できるかどうかはわかりませんが、jQueryの内部構造がわからないため（おそらく構文解析が行われます） html（）メソッド内）

248
gpilotino

これは少し速くてきれいです。

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

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));
}
86
Carl Hörberg

DOM Elements Creatorプラグインを使用する （私のお気に入り）：

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Optionコンストラクタを使用する（ブラウザサポートについてはよくわからない）：

$(new Option('myText', 'val')).appendTo('#mySelect');

document.createElementを使用する（$("<option></option>")でHTMLを解析する余分な作業を避ける）

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));
33
Nickolay

これは見栄えがよく、読みやすさを提供しますが、他の方法より遅くなります。

$.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(''));
28
m1sfit

これらの答えはすべて不必要に複雑なようです。あなたが必要なのは：

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

それは完全にクロスブラウザ互換です。

19
Animism

@joshperry

普通の .append も期待通りに動作するようです。

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

    return $("<option>").val(k).text(v);
  })
);
19
Сухой27
 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

15
Thorpe Obazee

注意してください...私は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);
15
Jack Holt

Microsoft Templatingアプローチ を使用するアプローチがあります。これは現在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
Nick Josevski

Ajax経由でドロップダウンアイテムを読み込む のようにして作成しました。上記の応答も受け入れられますが、パフォーマンスを向上させるためにDOMの変更をできるだけ少なくするのが常に良い方法です。

そのため、ループ内に各項目を追加するよりも、ループ内で項目を収集し、それが完了したらそれを追加する方が適切です。

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

それを追加

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

あるいはもっと良い 

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

「ワンライナー」で、上位2つの答えの間のソートの妥協点：

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

map を使用してOption要素の配列を作成し、applyを使用して各Optionをappend関数の個別の引数として送信することにより、それらをすべてSelectに一度に追加します。

7
joshperry

簡単な方法は：

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

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

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

それからオプションを追加するために、単に以下をしてください：

$('select').addOption('0', 'None');
7
Matt
  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
Salim
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で動的リストを使用するための完全な記事は、 http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQueryを参照してください。 aspx

6
H Sampat

前の答えはすべて有効な答えです - 最初にこれらすべてを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);
5
Stuart.Sklinar

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

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

var options = [];    
$.each(selectValues, function(key, value) {
    options.Push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);
5
DiverseAndRemote.com
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を操作します。

5
Christian Roman

次のコードでjson配列を反復処理するだけ

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

4
kashif

それが私が2次元配列で行ったことです。最初の列は項目iで、<option>のinnerHTMLに追加します。 2番目の列はrecord_id iで、<option>のvalueに追加します。

  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();
    }
}
4
Salty

JSONフォーマット：

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

そして、AjaxでDropdownに値を設定するための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
M.J

JQueryプラグインはここにあります： http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ 。

3
lkahtz

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

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

私はこれが簡単で素晴らしいことを発見しました。 

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

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

1
Dulith De Costa

ちょっとチャイムすることにしました。

  1. 以前に選択したオプションを処理します。追加するといくつかのブラウザがめちゃくちゃになる
  2. AppendでDOMを一度だけヒットする
  3. オプションを追加しながらmultipleプロパティを処理する
  4. オブジェクトの使い方を見せる
  5. オブジェクトの配列を使ってマップする方法を示す

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

1
Mark Schultheiss
<!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>
1
Satyendra Yadav
$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});
0
Lokesh thakur

JQueryのappendは引数として配列を取ることができるので、これをmapでワンライナーにすることを提案する人は誰もいません

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

またはreduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));
0
SU3

私は二つの最良の答えを素晴らしい答えにまとめました。

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.Push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));
0
Erick Asto Oblitas

実際には、パフォーマンスを向上させるには、オプションリストを個別に作成してselect 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/ /

0
shohan