正如问题所说,我如何使用jQuery添加一个新的选项到下拉列表?
谢谢
正如问题所说,我如何使用jQuery添加一个新的选项到下拉列表?
谢谢
当前回答
不使用任何额外的插件,
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
如果您有很多选项,或者这段代码需要非常频繁地运行,那么您应该考虑使用DocumentFragment,而不是不必要地多次修改DOM。只有少数几个选择,我认为这是不值得的。
------------------------------- 添加 --------------------------------
DocumentFragment是一个提高速度的好选项,但是我们不能使用document.createElement('option')创建选项元素,因为IE6和IE7不支持它。
我们可以做的是,创建一个新的选择元素,然后附加所有选项。循环完成后,将其附加到实际的DOM对象。
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
_select.append(
$('<option></option>').val(val).html(text)
);
});
$('#mySelect').append(_select.html());
这样我们只修改DOM一次!
其他回答
jQuery选择框插件。你可以这样做:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
你可以直接使用
美元(Html ddlClassName”)。(“<选项selected =价值=“selected \ \ " \ " > 1 < /选项> <选项价值= \ " \ " > 2 < /选项>”)
这里你可以使用直接字符串
不使用任何额外的插件,
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
如果您有很多选项,或者这段代码需要非常频繁地运行,那么您应该考虑使用DocumentFragment,而不是不必要地多次修改DOM。只有少数几个选择,我认为这是不值得的。
------------------------------- 添加 --------------------------------
DocumentFragment是一个提高速度的好选项,但是我们不能使用document.createElement('option')创建选项元素,因为IE6和IE7不支持它。
我们可以做的是,创建一个新的选择元素,然后附加所有选项。循环完成后,将其附加到实际的DOM对象。
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
_select.append(
$('<option></option>').val(val).html(text)
);
});
$('#mySelect').append(_select.html());
这样我们只修改DOM一次!
另外,使用.prepend()将选项添加到选项列表的开头。 http://api.jquery.com/prepend/
假设你的回答是“成功数据”。这包含一个列表,您需要在下拉菜单中添加选项。
success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
// NO DATA, throw an alert ...
alert ("No Data Found");
} else {
$.each(successData, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
} }
这将为您工作....