<select>
添加选项的最佳方法是什么?我正在寻找不需要插件执行的操作,但我也会对此感兴趣在那里的插件。
这就是我所做的: />这是matdumsa的简化版本: 2)将属性/属性移到地图中,作为append()的第二个参数。
#1 楼
与其他答案相同,采用jQuery方式:$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
评论
我首先将$(“#mySelect”)分配给一个变量,否则每次在循环内调用$(“#mySelect”)都是很浪费的,就像更新DOM一样。请参阅artzstudio.com/2009/04/jquery-performance-rules/…的第3点和第6点...
–帕特里克(Patrick)
2014年10月12日在7:03
好吧,您可以在每个循环之外执行var mySelect = $(“#mySelect”)。这样会更有效率。请参阅下面的卡尔的答案
–帕特里克(Patrick)
2014年10月14日下午16:50
我对更好的jQuery风格的建议:$('#mySelect').append($(“ ”“ .val(key).text(value));
–a11r
2014年11月28日在15:03
随着这个答案的流行,值得一提的是您应该避免循环中进行DOM更新。 jsperf.com/jquery-append-array-vs-string
– jthomas
2015年6月3日,下午3:48
由于错误的意向,此答案极具误导性... attr和text实际上是$('')对象的方法
– phil294
2015年10月10日,12:13
#2 楼
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()方法中进行了一些解析)
评论
您的方法显然比上面的“正确”答案更快,因为它也使用更少的jQuery。
– Teej
09年11月9日7:04
行“ $('#mySelect')。get(0).innerHTML = output.join('');“据我所知,它可以在Chrome和FF3.x中运行,但不能在IE7中运行
–蓝色
2010年1月6日在4:46
如果键中有一些引号或>,<,则会中断此操作。
–nickf
2010年1月19日,12:03
而且,如果我有两个选择,我不想失去。如何将这些新选项值附加到现有选项值上?
– VansFannel
2011年7月11日在9:52
一个小的改进是使用连接而不是加号进行连接,如下所示:output.push('
#3 楼
这样会更快,更干净。 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>
评论
完善。要添加它,可以添加选择的其他属性。 $ .each(selectValues,function(id,value,text){$('#mySelect')。append($(“ ”,{id:id value:value,text:text}));} );
– idok
13-4-10在4:22
它认为缓存`$('#mySelect')`是一个更好的主意,这样在循环之前您只需查找一次。当前,它正在DOM中为每个选项搜索元素。
– Sushanth-
13年5月9日在21:23
@Sushanth-如果集合很小,这对性能有多大影响?
–ckarbass
13年10月4日在21:32
@ckarbass-取决于您的DOM大小。将其分配给变量的工作量可能很大,而且工作量很小,这比在SO中编写注释要少得多!
–尼克H247
15年2月2日,12:41
#4 楼
jQueryvar 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));
}
评论
以前从未听说过Option对象。那是所有浏览器内置的吗?
–达里尔·海因(Darryl Hein)
2011年6月1日下午4:06
我尝试使用新的Option,但是发现它在IE6和7中不起作用。我没有理由,但是许多完整的jQuery选项都起作用。
–达里尔·海因(Darryl Hein)
2011年7月21日在1:36
也是添加选择的好方法。新的选项('display',value,true)
–boatcoder
2011-09-20 3:47
@ Mark0978实际上是新的Option('display',value,true,true)(javascriptkit.com/jsref/select.shtml)
–卡尔·霍尔伯格
2012年2月2日在8:15
@CarlHörberg对我来说很棒-非常简单!谢谢!
–乔什·布劳(Josh Bullough)
8月13日4:22
#5 楼
如果不必支持旧版IE,则使用Option
构造函数显然是可行的方法,这是一种可读有效的解决方案:到,但比:$(new Option('myText', 'val')).appendTo('#mySelect');
#6 楼
这样看起来更好,提供了可读性,但是比其他方法慢。字符串连接,并且仅使用一个追加调用。$.each(selectData, function(i, option)
{
$("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});
评论
这不是说“最快”的方法就是将各个字符串部分也作为单独的数组项插入,而不是在插入数组之前将每个选项的构成部分串联起来,因为无论如何它们都将作为结尾一起连接?
–bitoolean
19年1月17日在22:15
#7 楼
对@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
17年4月8日在3:55
优雅的加分点:适当使用map()构造,并结合append()的属性正确添加对象数组!
– Jochem Schulenklopper
17年8月2日在18:28
@joshperry我有点失望,因为我期望进行技术更正/更新。
– mpapec
19/12/23在6:33
#8 楼
所有这些答案似乎都不必要地复杂。您需要的是:var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
这是完全跨浏览器兼容的。
评论
应该是新的Option(值,键); ?参数顺序为选项(text_visible_part,value_behind_the_scenes)。
–鲍勃·斯坦(Bob Stein)
15-10-28在19:33
Array push跨浏览器不兼容吗?然后,当Array push更易读时,这是否不必要地复杂?
–bitoolean
19年1月17日在22:18
#9 楼
警告...我在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);
#10 楼
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
评论
与其他获得相同结果的方式相比,.each众所周知非常慢。这就是我的想法,会推荐这种方法。
–艾伦·泰勒斯(Allen Tellez)
15年5月6日在22:14
不幸的是,这里有90%的变体使用$ .each()。即使for()循环不太紧凑,它也可以为您提供更多控制和性能优势。
–HoldOffHunger
17年7月16日在0:41
#11 楼
有一种使用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");
I' ve更详细地介绍了此方法。
#12 楼
我做了这样的事情,通过Ajax加载了一个下拉列表项。上面的响应也是可以接受的,但是最好进行尽可能少的DOM修改以提高性能。因此,与其将每个项目添加到循环中,不如将其添加到循环中更好循环并在完成后附加它。
$(data).each(function(){
... Collect items
})
$('#select_id').append(items);
甚至更好的
/>
$('#select_id').html(items);
评论
$('#select_id')。html(items);完全按照我想要的方式工作。使用append在所有onchange事件中继续附加项目。非常感谢。
– Dipanwita Das
17年6月20日在6:01
#13 楼
简单的方法是:$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
评论
我已经建立了选项列表,因此填充选择字段就像Willard所说的那样容易。
–Loony2nz
2011年8月3日在22:14
#14 楼
其他大多数答案都使用each
函数遍历selectValues
。这要求为每个元素调用append,并在分别添加每个元素时触发重排。将这个答案更新为更惯用的函数方法(使用现代JS)可以形成为仅调用
append
一次,使用通过地图创建的option
元素数组和Option
元素构造函数。使用
Option
DOM元素可以减少函数调用开销,因为在创建和jQuery后不需要更新option
元素解析逻辑无需运行。$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
如果您创建了一个工厂实用程序函数来更新选项对象,则可以进一步简化此操作:
const newoption = (...args) => new Option(...args)
然后可以将其直接提供给
map
:$('mySelect').append($.map(selectValues, newoption))
以前的配方
因为
append
也允许通过将值作为可变数量的参数传递,我们可以预先创建option
元素列表的列表,并将其作为参数附加到通过使用apply
进行ingle调用。 $.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));
#15 楼
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的动态选择列表
#16 楼
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(optionValues0, function(order, object) {
key = object.id;
value = object.value;
$('#mySelect').append($('<option>', { value : key }).text(value));
});
#17 楼
我建议您最好编写自己的jQuery函数,例如:jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
,然后添加一个选项,只需执行以下操作即可:
$('select').addOption('0', 'None');
评论
您能详细说明一下吗?
–莫。
16-10-17在10:36
#18 楼
您可以使用以下代码遍历json数组$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
#19 楼
尽管前面的答案都是有效的答案-建议您首先将所有这些附加到documentFragmnet,然后在...之后将该文档片段作为元素附加到...请参阅John Resig关于此事的想法。 ..
类似以下内容:
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);
#20 楼
$.each
慢于for
循环每次,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);
#21 楼
还有另一种方法:var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
评论
我看到您在这里做了什么...您采纳了缓存$('#mySelect')的建议,然后重构了@rocktheroad答案...不管怎么说,这是更实际的解决方案
– Chef_Code
17年4月8日,下午3:51
#22 楼
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。
评论
您可以通过替换$(“#myselect”)。empty()。append(opts);来进一步优化它,并完全避免使用jQuery。使用getElementById('myselect')。innerHtml = opts;
–vahanpwns
16年5月21日在0:19
#23 楼
这就是我对二维数组所做的操作:第一列是项i,添加到innerHTML
的<option>
中。第二列是record_id i,添加到value
的<option>
中:br /> JavaScript / Ajax
$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);
评论
看起来不错。太糟糕了,它没有使用jQuery。另外,在使用select.options.add()方法之前,我遇到了问题。无法回忆起哪个浏览器和确切的问题,但是我决定从中解决一个问题,让jQuery处理差异。
–达里尔·海因(Darryl Hein)
2012年8月15日在3:24
我对PHP和JQuerry完全陌生,但以上代码在所有浏览器中均有效。唯一的问题-它在iPhone上无法正常运行,我对此发布了一个问题,到目前为止还没有运气:( stackoverflow.com/questions/11364040 / ...
–咸
2012年8月15日在20:25
#24 楼
可以在这里找到jQuery插件:使用jQuery和AJAX自动填充选择框。#25 楼
我发现这很简单,效果很好。for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
#26 楼
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
}
#27 楼
使用$ .map()函数,您可以用一种更优雅的方式做到这一点:$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
评论
这有点短,但是一个问题是处理已接受的答案确实对val和key var进行转义。
–达里尔·海因(Darryl Hein)
17年7月11日在3:26
#28 楼
<!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>
#29 楼
在下面的行中设置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”,
下拉,
显示名称:test 1->值是1
显示名称:test 2->值是2
评论
请描述一下解决方案。
– Vinay Prajapati
18年4月11日在6:14
#30 楼
实际上,为了获得改进的性能,最好单独制作选项列表,然后追加选择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/
评论
可能有帮助:texotela.co.uk/code/jquery/select(在我偶然发现此问题后对我有帮助)上面列出的清理版本仅在Jquery 1.4+中有效。对于较旧的版本,请使用matdumsa的答案中的一个
如matdumsa的答案所示,{value:key}应该为{“ value”:key}。
我不相信,因为value是一个字符串(并且经过硬编码),因此不需要将其引起来。
标题应该改为“向带有jQuery的JSON对象中的选择添加选项的最佳方法是什么?