在jQuery中将选项添加为JavaScript对象的最佳方法是什么?


1379

<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()的第二个参数。


4
可能有帮助:texotela.co.uk/code/jquery/select(在我偶然发现此问题后对我有帮助)
ManBugra 2011年

2
上面列出的清理版本仅在Jquery 1.4+中有效。对于较旧的版本,请使用matdumsa的答案中的一个
Thedric Walker

如matdumsa的答案所示,{value:key}应该为{“ value”:key}。
Nick P

我不这么认为,因为它value是一个字符串(并且经过硬编码),所以不需要用引号引起来。
Darryl Hein 2014年

1
标题应该改为“向带有jQuery的JSON对象中的选项添加选项的最佳方法是什么?
Dr Fred

Answers:


1383

与其他答案相同,采用jQuery方式:

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

99
我首先要分配$("#mySelect")给var,否则$("#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
这个答案是如此多的误导性,因为错误的intendation的...... attrtext实际上是方法$('<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

4
行“ $('#mySelect')。get(0).innerHTML = output.join('');“ 据我所知,它可以在Chrome和FF3.x中运行,但不能在IE7中运行
蓝色2010年

19
如果key包含引号或其中的一个>, <,则会中断。
尼克

3
而且,如果我有两个选择,我不想失去。如何将这些新选项值附加到现有选项值上?
VansFannel

6
一个小的改进是使用连接而不是加号进行连接,如下所示: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
完善。要添加它,可以添加选择的其他属性。$ .each(selectValues,function(id,value,text){$('#mySelect')。append($(“ <option />”,{id:id value:value,text:text}));} );
idok

45
它认为缓存`$('#mySelect')`是一个更好的主意,这样在循环之前您只需查找一次。当前,它正在DOM中为每个选项搜索元素。
苏珊思-

@Sushanth-如果集合很小,这会对性能造成多大的影响?
ckarbass

3
@ckarbass-取决于您的DOM大小。将其分配给变量的工作量可能很大,而且工作量很小,这比在SO中编写注释要少得多!
尼克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以前从未听说过该物体。那是所有浏览器内置的吗?
Darryl Hein

2
我尝试使用new Option,但是发现它在IE6和7中不起作用。我没有理由,但是许多完整的jQuery选项都起作用。
Darryl Hein

也是添加选择的好方法。 new Option('display', value, true)
boatcoder

@ Mark0978实际上它的 new Option('display', value, true, true)javascriptkit.com/jsref/select.shtml
卡尔·霍伯格


31

这看起来更好,提供了可读性,但是比其他方法慢。

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

如果要提高速度,最快的方法(已测试!)是使用数组而不是字符串连接,并且仅使用一个附加调用。

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

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

这不是说“最快”的方法就是将各个字符串部分也作为单独的数组项插入,而不是在插入数组之前将每个选项的构成部分串联起来,因为它们最终都将作为一个整体连接在一起吗?
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

@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)。
鲍勃·斯坦

Array push跨浏览器不兼容吗?然后,当Array push更易读时,这是否不必要地复杂?
bitoolean

18

警告...我在Android 2.2(Cyanogen 7.0.1)手机(T-Mobile G2)上将jQuery Mobile 1.0b2与PhoneGap 1.0.0结合使用,根本无法使用.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众所周知非常慢。这就是我的想法,会推荐这种方法。
艾伦·泰勒斯

不幸的是,这里有90%的变体使用$ .each()。即使for()循环不太紧凑,它也可以为您提供更多控制和性能优势。
HoldOffHunger

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

10

简单的方法是:

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

我已经建立了选项列表,所以填充选择字段就像Willard所说的那样容易。
Loony2nz 2011年

10

其他大多数答案都使用each函数在上进行迭代selectValues。这要求为每个元素调用append,并且在分别添加每个元素时触发重排。

使用append一个option使用mapOptionelement构造函数创建的元素数组,可以将此答案更新为更惯用的函数方法(使用现代JS)以仅调用一次。

使用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元素列表map并将其作为参数附加到单个调用中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');

你能详细说明一下吗?
Mo.

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. $.eachfor循环慢
  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;
不用

6

那就是我对二维数组所做的事情:第一列是项目i,添加到innerHTML<option>。第二列是record_id i,添加到的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处理差异。
Darryl Hein

我对PHP和JQuerry完全陌生,但是上面的代码在所有浏览器中都有效。唯一的问题-这不是在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"
}]

并使用jQuery代码在Ajax成功时将值填充到Dropdown中:

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(''));

这有点短,但是一个问题是处理已接受的答案确实要对val和key var进行转义。
Darryl Hein

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用作选择元素的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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.