如何将option / ListItem动态添加到下拉列表

Question

I need to build my DDL dynamically,I get info from DB using JSON (I get the data with no problem ) but couldn't show my data in my DDL... I tried three different ways, nothing changed.. What am I doing wrong ?

//HTML

  <asp:DropDownList ID="productDDL" runat="server" CssClass="ddl"></asp:DropDownList>

//Javascript

  function creatDDL(data) {
            var obj = $.parseJSON(data.Data);
            for (var i = 0; i < obj.length; i++) {
                $("#productDDL").append("<option>" + obj[i].id + "' - '" + obj[i].name + "</option>");
             $("#productDDL").append("<option>"+obj[i].id + "' - '" + obj[i].name+"</option>");
                $("#productDDL").append($("<option></option>").html(obj[i].id + "' - '" + obj[i].name));

            }
        }

Answer 1

I like your third attempt best. Assuming your data is in order, you just need to brush up on the jQuery API .

Here's a working version of what I gather you're trying to do:

function createDDL(data) {
  var options = $.parseJSON(data.Data);

  $.each(options, function(n, option) {
    var $option = $('<option />').text(option.name).val(option.id);
    $("#productDDL").append($option);
  });
}

Fiddle: http://jsfiddle.net/klenwell/Esr5q/