Populate Html.DropDownList mit jquery oder JS

Question

Hier ist, was ich habe:

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

Aber die Dropdown-Liste bleibt immer gleich. Warum funktioniert das nicht? Die Datenvariable hat schöne Werte. Außerdem möchte ich vor der for-Schleife die Dropdown-Liste leeren/Wie geht das?

Hier ist meine Dropdown-Liste in der Ansicht:

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

Answer 1

bereits.

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

Check out my this answer, um weitere Informationen darüber, wie Daten aus einer MVC-Aktion erhalten in der Dropdown-Liste

EDIT zu laden: Gemäß dem Kommentar vorhandene Daten

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

zu entfernen EDIT 2: Idrumsgood 's Antwort hat einen sehr guten Punkt. Anstatt die append-Methode immer innerhalb der Schleife aufzurufen, behalten Sie den Wert in einer Variablen und rufen Sie die html-Methode nur einmal auf.

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

Answer 2

Dies scheint zu funktionieren: http://jsfiddle.net/ykFJd/2/

JS

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

Answer 3

ich eine nette Funktion für die Bindung eines js Hash zu einer Auswahllisten geschrieben. Siehe meine Antwort auf Best way to populate select list with JQuery/Json?

Beispiel Nutzung:

// 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'); 

Answer 4

Obwohl die anderen Antworten wird erreichen, was Sie tun wollen, würde ich empfehlen, Ihre Option HTML in eine String-Variable schreiben und Anfügen es, nachdem die Schleife beendet ist , anstatt innerhalb der Schleife anzuhängen. Dies kann einige spürbare Leistungsvorteile haben, wenn Ihre Liste länger wird. Mit .html() wird auch jedes Mal die Liste gelöscht.

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