[英]JQuery create new select option
我在常规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.
就像是:
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();
关于什么
var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text('myText');
$('#county').append(option);
怎么样
$('#county').append(
$('<option />')
.text('Select a city / town in Sweden')
.val(''),
$('<option />')
.text('Melbourne')
.val('Melbourne')
);
如果你需要制作单个元素,你可以使用这个结构:
$('<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');
});
}
这令人困惑。 当你说“表单对象”时,你的意思是“ <select>
element”吗? 如果没有,你的代码将无法工作,所以我假设你的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>
一个非常简单的方法来做到这一点......
// create the option
var opt = $("<option>").val("myvalue").text("my text");
//append option to the select element
$(#my-select).append(opt);
这可以通过多种方式完成,即使是在一条线上,如果你真的想要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.