我如何使用jQuery添加选项到下拉列表?

使用插件:jQuery选择框。你可以这样做:

var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);

不使用任何额外的插件，

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 = {
val1 : 'text1',
val2 : 'text2'
};
$.each(myOptions, function(val, text) {
$('#mySelect').append( new Option(text,val) );
});

如果你想指定选项a)是否是默认选择值，b)现在应该被选择，你可以传递另外两个参数:

    var defaultSelected = false;
var nowSelected     = true;
$('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

你可以直接使用

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

这里你可以使用直接字符串

函数:

function addtoselect(param,value){
$('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}

请注意@Phrogz的解决方案不能在ie8中运行，而@nickf的解决方案可以在所有主流浏览器中运行。另一种方法是:

$.each(myOptions, function(val, text) {
$("#mySelect").append($("<option/>").attr("value", val).text(text));
});

我让我的控制器在MVC中返回一个只有一个项目的选择列表。

$('#DropDownQuality').append(
$('<option></option>').val(data[0].Value).html(data[0].Text));

使用jquery可以使用

      this.$('select#myid').append('<option>newvalue</option>');

其中“myid”是下拉列表中的id，而newvalue是你想要插入的文本。

我需要为下拉菜单添加尽可能多的选项，因为我的页面上有下拉菜单。所以我是这样用的:

function myAppender(obj, value, text){
obj.append($('<option></option>').val(value).html(text));
}


$(document).ready(function() {
var counter = 0;
var builder = 0;
// Get the number of dropdowns
$('[id*="ddlPosition_"]').each(function() {
counter++;
});


// Add the options for each dropdown
$('[id*="ddlPosition_"]').each(function() {
var myId = this.id.split('_')[1];


// Add each option in a loop for the specific dropdown we are on
for (var i=0; i<counter; i++) {
myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
}
$('[id*="ddlPosition_'+myId+'"]').val(builder);
builder++;
});
});

这将动态地设置值为1到n的下拉列表，并根据下拉列表的顺序自动选择值(例如，第二个下拉列表在框中得到“2”，等等)。

这是荒谬的，我不能在我的第二个.each()中使用this或this.Object或$.obj或任何类似的东西，尽管-我实际上必须获得该对象的特定ID，然后在它附加之前获取并将整个对象传递给我的函数。幸运的是，我的下拉列表的ID被一个“_”隔开，我可以抓取它。我觉得我不应该这样做，但它一直给我jQuery异常。我所经历的那些让别人纠结的事情，也许会让人乐于知道。

开始时将项目添加到列表中

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

最后将项目添加到列表中

$('<option value="6">Java Script</option>').appendTo("#ddlList");

常用的下拉操作(获取，设置，添加，删除)使用jQuery

假设你的回答是“成功数据”。这包含一个列表，您需要在下拉菜单中添加选项。

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)
);
});
} }

这将为您工作....