填充Html.DropDownList與jQuery或JS

以下是我有：填充Html.DropDownList與jQuery或JS

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")%>

來源

2012-04-09 user1322207

什麼是數據？是一個json對象？ – Shyju 2012-04-09 18:08:40

@Shyju是的，我返回返回Json（List ）; – user1322207 2012-04-09 18:09:54

@Shyju我加了一些細節。你能再次看到這個問題嗎？ – user1322207 2012-04-09 18:11:06

試試這個。

$.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);

來源

2012-04-09 18:11:23 Shyju

它的工作:)但如何在此之前清空下拉列表？ – user1322207 2012-04-09 18:13:23

用'html'代替'append' :) – 2012-04-09 18:14:07

@FlorianMargaine但是現在在下拉列表中只有一個選項標籤 – user1322207 2012-04-09 18:15:23

這似乎工作：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 
     }) 
    );    
}

來源

2012-04-09 18:16:02

謝謝...有用的答案... – RajeshKdev 2012-12-26 07:21:07

我寫了一個不錯的功能一個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');

來源

2012-04-09 18:19:03

雖然其他的答案將完成你想要做的事情，我會建議寫你的選擇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);

來源

2012-04-09 18:23:29 idrumgood

感謝您考慮一點關於性能。 – 2012-04-09 18:25:02

這是一個非常有用的觀點。感謝分享。我只是將其添加到接受的答案中。 +1今天教給我一些東西。 – Shyju 2012-04-09 19:05:35

感謝您的性能提升信息。 – M009 2015-05-05 00:40:07

填充Html.DropDownList與jQuery或JS

回答

相關問題