如何使用jQuery向DropDownList添加选项？

如问题所述，如何使用jQuery向DropDownList添加新选项

感谢使用插件：

。您可以这样做：

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

---

这样我们将只修改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（“12”）

->在这里，您可以使用直接字符串

尝试以下功能：

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

---

Pease note@Phrogz的解决方案在IE8中不起作用，而@nickf的解决方案在所有主要浏览器中都起作用。另一种方法是：

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

---

您可能需要先清除下拉列表 $（“#DropDownQuality”）.empty（）

我让MVC中的控制器返回一个只包含一项的选择列表

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

$（'DropDownQuality'）。追加(
$（''）.val（数据[0].Value）.html（数据[0].Text））；

此外，还可以使用.prepend（）将选项添加到选项列表的开头。

---

使用jquery您可以使用

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

this.$（'select#myid'）.append（'newvalue'）；

---

其中“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++;
    });
});

函数myAppender（对象、值、文本）{
obj.append（$（''）.val（value.html（text））；
}
$（文档）.ready（函数（）{
var计数器=0；
var=0；
//获取下拉列表的数量
$（'[id*=“ddlPosition_u”]'）。每个（函数（）{
计数器++；
});
//为每个下拉列表添加选项
$（'[id*=“ddlPosition_u”]'）。每个（函数（）{
var myId=this.id.split（“”“）[1]；
//将每个选项添加到一个循环中，以获得我们正在使用的特定下拉列表
对于（var i=0；i将项目添加到开头的列表中

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

$（“#ddlist”）.prepend（'Select'）；

最后将项目添加到列表中

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

$（“Java脚本”）.appendTo（“#ddlist”）；

让我们认为您的回答是“successData”。其中包含一个列表，您需要将其作为选项添加到下拉菜单中

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

success:函数（successData）{
var sizeOfData=successData.length；
如果（sizeOfData==0）{
//没有数据，抛出警报。。。
警报（“未找到数据”）；
}否则{
$.each（成功数据，函数（val，文本）{
mySelect.append(
$（''）.val（val）.html（文本）
);
});
} }

这对您很有用。…
方法参数有点误导，函数（val，text）应该是函数（index，option）例如。在其他方面效果很好。@Crossbrowser:我不同意-
val
和
text
实际上描述了变量及其用法。仅用于该示例，但作为一种通用方法，这些变量具有误导性（它没有告诉我如何使用该方法）。但是，我会给出答案，答案不是关于$.each方法的使用。我以前使用的是
mySelect.append（新选项（text，val））；
，这在IE8中不起作用。我必须切换到@nickf的
mySelect.append（$（''）.val（val.html（text））；
@briansol:
.attr（'selected'，true.\false）
如何设置属性，如选择默认值？我更喜欢这个方法，而不是
”
方法；它看起来很脏。在ie8中不起作用。只是尝试了一下，还看到了下面的另一条评论。只是好奇，为什么这个问题被否决了？可能是因为它没有显示任何代码片段：）为什么每次都要递增计数器？您是jquery新手吗？var counter=$（“[id*=”ddlPosition_u“]”）.length不那么冗长，效率也更高。我认为在开始发布代码之前，您需要多一点经验。这不是生产质量代码，因为对于这样一项琐碎的任务来说，它编写得很糟糕，而且过于复杂。无意冒犯，但您有58个答案，没有投票。您显然误解了我所创建的内容。ccounter是增加下拉列表中发布的值，我有几个ID相同，只是末尾有一个不同的“35;##”，因此.length（）可能不准确。这就是“ID*=”的原因在选择器中。至于我的其他答案，通常我也会尽可能地提倡更简单的方法，如果人们对编码不那么深奥，写的东西更简单，我的答案可能会有更多的投票权。但是人们希望让自己看起来更聪明，所以他们不会选择这么简单的东西。这不意味着我错了，因为我只想简单地处理这个行业。我也不喜欢对别人的代码进行故障排除或构建比它需要的复杂得多的代码。如果有人能解释为什么发送“$（this）”，我也可能对$（this）更有信心myAppender的对象不起作用。如果在选项参数中使用双引号，它们将关闭函数并中断脚本。将
.prepend（“…”）/$（“…”）
更改为
。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)
        );
    });
} }