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

Posted 2023-02-16

【中文标题】如何使用 jQuery 向 DropDownList 添加选项？

【英文标题】：How do I add options to a DropDownList using jQuery?

【发布时间】：2010-09-23 22:39:52

【问题描述】：

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

谢谢

【问题讨论】：

只是好奇，为什么这个问题被否决了？可能是因为它没有显示任何代码 sn-p :)

【参考方案1】：

使用插件：jQuery Selection Box。你可以这样做：

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

【参考方案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！

【讨论】：

方法参数有点误导，比如function(val, text)应该是function(index, option)。否则效果很好。

@Crossbrowser：我不同意 - val 和 text 实际上描述了变量及其用途。

仅用于该示例，但是作为通用方法，这些变量具有误导性（它让我不知道如何使用该方法）。但是，我会说答案与 $.each 方法的使用无关。

我之前使用的是mySelect.append(new Option(text, val));，在IE8中不起作用。我不得不切换到@nickf 的mySelect.append($('<option></option>').val(val).html(text));

@briansol : .attr('selected', true|false)

【参考方案3】：

没有插件，这可以更容易，不用太多 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) );

【讨论】：

如何设置属性，比如选择默认值？

我比"<option></option>"方法更喜欢这个；看起来很脏。

在 ie8 中不起作用.. 刚试了一下，还看到下面对此的另一条评论。

【参考方案4】：

你可以直接使用

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

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

【参考方案5】：

试试这个功能：

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

【参考方案6】：

请注意@Phrogz 的解决方案不适用于 IE 8，而 @nickf 的解决方案适用于所有主要浏览器。另一种方法是：

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

【参考方案7】：

您可能需要先清除 DropDown $('#DropDownQuality').empty();

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

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

【讨论】：

data 未定义。

【参考方案8】：

此外，使用 .prepend() 将选项添加到选项列表的开头。 http://api.jquery.com/prepend/

【参考方案9】：

使用 jquery 你可以使用

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

其中“myid”是下拉列表的id，newvalue是您要插入的文本..

【参考方案10】：

我需要向下拉列表中添加与我的页面上的下拉列表一样多的选项。所以我是这样使用的：

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 异常，否则。其他人在与我的生活作斗争时可能会喜欢知道的事情。

【讨论】：

你为什么要在每个中增加计数器？你是 jquery 的新手吗？ var counter = $('[id*="ddlPosition_"]').length 不那么冗长，效率更高。我认为在开始发布代码之前您需要更多经验。这不是生产质量代码，因为对于这样一个微不足道的任务，它写得不好并且过于复杂。没有冒犯，但您有 58 个答案且没有赞成票是有原因的。

你显然误解了我在创造什么。计数器是增加下拉列表中发布的值，我有几个具有相同 ID，只是最后有不同的“_##”，所以 .length() 会不准确。这就是选择器中“id*=”的原因。

至于我的其他答案，一般来说，我也提倡尽可能使用更简单的方法，如果人们的编码不是那么深奥，写的东西更简单，我的答案可能会更多票。但是人们想让自己看起来很聪明，所以他们不会选择这么简单的东西。想要简单地了解这个行业并没有让我错。我也不喜欢在其他人的代码上进行故障排除或构建比它需要的复杂得多的代码。

如果有人能解释为什么将“$(this)”而不是对象发送到 myAppender 不起作用，我可能对那个循环中的 $(this).length() 更有信心。

【参考方案11】：

在开头添加项目到列表

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

最后将项目添加到列表中

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

Common Dropdown operation (Get, Set, Add, Remove) using jQuery

【讨论】：

如果您在选项参数中使用双引号，它们将关闭函数并中断脚本。将 .prepend("...") / $("...") 更改为 .prepend('...') / $('...') 将修复 sn-p。

【参考方案12】：

假设您的回答是“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)
        );
    );
 

这对你有用....