Question

I am making ajax call using ASP.NET 3.5 to populate dropdown list as a part of cascading dropdowns, and it works fine, I am getting JSON formatted results back. But I have no luck populating dropdown calling this function:

$.fn.populateSelect = function(data)
{
     if( data.length > 0)
     {
          var dropDown = this;

          dropDown.empty().append('<option selected = "selected" value="0">(Select Item)</option>');
          $.each(data, function()
          {
                dropDown.append($("<option></option>").val(this.Key).text(this.Value));


          });

      }

}

Always gives “Object doesn’t support this property or method” on a last line. Data that I am getting back from AJAX call, which is a C# serialized List of KeyValuePairs typically looks like this:

[{"Key":1,"Value":"Anchor Fixation"},{"Key":3,"Value":"Ankle Arthroplasty"},{"Key":19,"Value":"Disc Arthroplasty"},{"Key":20,"Value":"Elbow Arthroplasty, "},{"Key":23,"Value":"Fracture Fixation/ Bone Fixation"},{"Key":32,"Value":"Hip Arthroplasty,"},{"Key":38,"Value":"Knee Arthroplasty"},{"Key":55,"Value":"Radial Head Arthroplasty"},{"Key":59,"Value":"Screw/Rod/Wire/Pin"},{"Key":60,"Value":"Shoulder Arthroplasty"},{"Key":61,"Value":"Silastic Implant"},{"Key":65,"Value":"Spine fusion/fixation"},{"Key":74,"Value":"Wrist Arthroplasty"}]

What am I doing wrong?

Answer 1

Updated answer

---

If its ASP.NET 3.5 then the response will be surely wrapped in “d”. So try something like this.

$.fn.populateSelect = function (msg) {
    var data = msg.hasOwnProperty('d') ? msg.d : msg;
    if (data.length > 0) {
        var output = [];
        output.push('<option selected = "selected" value="0">(Select Item)</option>');
        $.each(data, function (idx, val) {
            output.push('<option value="' + val.Key + '">' + val.Value + '</option>');
        });
        $(this).html(output.join(''));
    }
}

Have changed this inside jQuery.each.
This is more optimal. Because in your method, you were manipulating DOM for adding each option.
Now, call it like this

$(document).ready(function () {
    var values = [{ "Key": 1, "Value": "Anchor Fixation" }, { "Key": 3, "Value": "Ankle Arthroplasty" }, { "Key": 19, "Value": "Disc Arthroplasty"}];
    $("#myselect").populateSelect(values);
});

I dont see why this won’t work for you. Click here to see the updated working example.
Is that a browser specific issue?