Bind Json Data To Dropdown List Using Ajax Call

Question

I'm developing a windows phone 7 application using phone gap.

In My Project I'm using Web service to bind data to drop down list.

my html code to bind the data to ID ddlcas

<tr><td>Caste </td><td><select id="ddlcas"></select></td></tr>

my Ajax Call

$.ajax({

            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "xxxxxxxxxxxxxx",
            corssDomain: true,
            dataType: "jsonp",
            success: function (data) {

            var result = data;
            $.each(result, function (key, value) {
            var appenddata = "<option value = '" + value.ListKey + " '>" + value.ListValue + " </option>";
            $('#ddlcas').html($('#ddlcas').html() + appenddata);
             });

My Web service Return Data format:

[
 {
  ListKey: "1",
  ListValue: "6000 Niyogi Brahmin"
 },
 {
  ListKey: "2",
  ListValue: "96K Kokanastha"
 },
 {
 ListKey: "3",
 ListValue: "Ad Dharmi"
 }, 
 /*upto 350 cast name */
]

My problem Is:

If web service Return Data is Small No Problem It's bind Quickly. But If Json Return data is Large Example 350 to 400 data. It's Make Browser Not Responding And Some Alert Come Like Stop Scripting... I Want To Know Where I made Mistake Plz Check And Tell ...

Solution

Do not modify markup inside the loop. Update markup when loop is over.

Try changing your success callback as below

success: function (data) {                    
         var appenddata;
         $.each(data, function (key, value) {
             appenddata += "<option value = '" + value.ListKey + " '>" + value.ListValue + " </option>";                        
         });
        $('#ddlcas').html(appenddata);
}