JQuery 创建新的选择选项
Posted
技术标签:
【中文标题】JQuery 创建新的选择选项【英文标题】:JQuery create new select option 【发布时间】:2011-02-15 14:11:42 【问题描述】:我在创建选择选项的常规 javascript 中有以下函数。有没有一种方法可以用 jQuery 做到这一点而不必使用表单对象?也许将选项存储为 JSON 对象数组并在调用函数中解析它...
function populate(form)
form.options.length = 0;
form.options[0] = new Option("Select a city / town in Sweden","");
form.options[1] = new Option("Melbourne","Melbourne");
下面是我如何调用上面的函数:
populate(document.form.county); //county is the id of the dropdownlist to populate.
【问题讨论】:
可能重复,***.com/q/740195/425313 【参考方案1】:一个非常简单的方法来做到这一点......
// create the option
var opt = $("<option>").val("myvalue").text("my text");
//append option to the select element
$(#my-select).append(opt);
这可以通过多种方式完成,如果你真的想的话,甚至可以在一行中完成。
【讨论】:
【参考方案2】:如果你需要制作单个元素,你可以使用这个结构:
$('<option/>',
'class': this.dataID,
'text': this.s_dataValue
).appendTo('.subCategory');
但是如果你需要打印很多元素,你可以使用这个结构:
function printOptions(arr)
jQuery.each(arr, function()
$('<option/>',
'value': this.dataID,
'text': this.s_dataValue
).appendTo('.subCategory');
);
【讨论】:
【参考方案3】:怎么样
var option = $('<option/>');
option.attr( 'value': 'myValue' ).text('myText');
$('#county').append(option);
【讨论】:
使用 jQuery 1.4+,你可以这样做:$('<option/>', value : 'myValue' ).text('myText').appendTo('#country');
建立选项列表,然后将它们附加到 DOM 会稍微高效一些,因此您不会每次都导致回流。见developers.google.com/speed/articles/reflow和***.com/questions/510213/…
非常优雅的方式!不错。【参考方案4】:
这令人困惑。当您说“表单对象”时,您的意思是“<select>
元素”吗?如果不是,您的代码将不起作用,因此我假设您的 form
变量实际上是对 <select>
元素的引用。为什么要重写这段代码?自 1996 年左右以来,您一直在所有可编写脚本的浏览器中工作,并且不会很快停止工作。使用 jQuery 会立即使您的代码变慢、更容易出错并且跨浏览器的兼容性降低。
这是一个函数,它使用您当前的代码作为起点,并从对象中填充 <select>
元素:
<select id="mySelect"></select>
<script type="text/javascript>
function populateSelect(select, optionsData)
var options = select.options, o, selected;
options.length = 0;
for (var i = 0, len = optionsData.length; i < len; ++i)
o = optionsData[i];
selected = !!o.selected;
options[i] = new Option(o.text, o.value, selected, selected);
var optionsData = [
text: "Select a city / town in Sweden",
value: ""
,
text: "Melbourne",
value: "Melbourne",
selected: true
];
populateSelect(document.getElementById("mySelect"), optionsData);
</script>
【讨论】:
【参考方案5】:怎么样
$('#county').append(
$('<option />')
.text('Select a city / town in Sweden')
.val(''),
$('<option />')
.text('Melbourne')
.val('Melbourne')
);
【讨论】:
【参考方案6】:类似:
function populate(selector)
$(selector)
.append('<option value="foo">foo</option>')
.append('<option value="bar">bar</option>')
populate('#myform .myselect');
甚至:
$.fn.populate = function()
$(this)
.append('<option value="foo">foo</option>')
.append('<option value="bar">bar</option>')
$('#myform .myselect').populate();
【讨论】:
以上是关于JQuery 创建新的选择选项的主要内容,如果未能解决你的问题,请参考以下文章
当每个下拉列表动态创建ID时,jquery选择选项数据和值[关闭]