我在常规的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>
元素”?如果没有,你的代码将无法正常工作,所以我会假设你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);
这可能会在很多方面,如果真的要做到,即使是在一个单一的线。