使用 jquery 或 JS 填充 Html.DropDownList答案

【问题标题】：Populate Html.DropDownList with jquery or JS使用 jquery 或 JS 填充 Html.DropDownList
【发布时间】：2012-04-09 18:06:29
【问题描述】：

这是我所拥有的：

for (i = 0; i < data.length; i++) {
                $("#myDropDownLisTId").find('tbody')  
                .append($('<option>').attr('value', data[i].id).attr('name', data[i].name)
                );               
            }

但下拉列表始终保持不变。为什么这不起作用？数据变量具有漂亮的值。另外，我想在for循环之前清空下拉列表/怎么做？

这是我在视图中的下拉列表：

<%= Html.DropDownList("myDropDownLisTId")%>

【问题讨论】：

什么是数据？那是一个 json 对象吗？
@Shyju 是的，我返回 return Json(List);
@Shyju 我添加了一些细节。你能再看看这个问题吗？
@Shyju 但是在那之前如何清空下拉列表？
jQuery 是一个 JavaScript 库，而不是 JavaScript 的替代品。 “jquery 或 JS”没有意义。

标签： javascript jquery

【解决方案1】：

虽然其他答案将完成您希望做的事情，但我建议您将选项 HTML 写入字符串变量并在循环完成后附加它，而不是在循环中附加。当您的列表变长时，这可能会带来一些明显的性能优势。使用.html() 也将负责每次清空列表。

        var tempList = '';
        for (i = 0; i < data.length; i++) {  
            tempList += '<option value="' + data[i].id + '" name="' + data[i].name +'">' + data[i].text + '</option>';            
        }
        $("#myDropDownLisTId").html(tempList);

【讨论】：

这是一个非常有效的观点。感谢分享。我刚刚将此添加到已接受的答案中。 +1 今天教我一些东西。

【解决方案2】：

试试这个。

$.each(data, function() {
   $("#myDropDownLisTId").append($("<option />").val(this.id).text(this.Text));
 });

查看我的this answer，了解有关如何从 MVC 操作获取数据以加载下拉列表的更多详细信息

编辑：根据评论删除现有数据

$("#myDropDownLisTId").empty()
$.each(data, function() {
   $("#myDropDownLisTId").append($("<option />").val(this.id).text(this.Text));
 });

编辑 2： Idrumsgood 的回答很有道理。而不是每次在循环内调用 append 方法，只需将值保存在变量中并仅调用 html 方法一次。

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

var items=""
$.each(data, function() {
   items+="<option value='" + this.id + "'>" + this.Text + "</option>";
 });
$("#myDropDownLisTId").html(items);

【讨论】：

它正在工作:) 但是在此之前如何清空下拉列表？
将append 替换为html :)
@FlorianMargaine 但是现在下拉列表中只有一个选项标签
@Shyju 如何在下拉列表中添加分隔符 - 无法选择？ “-----”
@user1322207: 什么是分隔符？

【解决方案3】：

这似乎有效：http://jsfiddle.net/ykFJd/2/

var data = [
    {id:'0', name:'test 0'},  
    {id:'1', name:'test 1'},
    {id:'2', name:'test 2'},
    {id:'3', name:'test 3'},
    {id:'4', name:'test 4'},    
];


for (var i = 0; i < data.length; i++) {
    $("#myDropDownLisTId").append(
        $('<option />', {
            'value': data[i].id,
            'name': data[i].name,
            'text': data[i].name
        })
    );               
}

【讨论】：

【解决方案4】：

我编写了一个很好的函数来将 js 哈希绑定到选择列表。在Best way to populate select list with JQuery / Json?查看我的回答

示例用法：

// you can easily pass in response.d from an AJAX call if it's JSON formatted
var users = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Cindy'} ]
setSelectOptions($('#selectList'), users, 'id', 'name');

【讨论】：