使用Ajax调用将Json数据绑定到下拉列表

时间:2013-11-23 14:24:15

标签: ajax json html5 web-services cordova

我正在使用手机间隙开发Windows Phone 7应用程序。

在我的项目中,我正在使用Web服务将数据绑定到下拉列表。

我的html代码将数据绑定到ID ddlcas

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

我的Ajax电话

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

我的网络服务返回数据格式:

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

我的问题是:

如果Web服务返回数据很小没有问题它快速绑定。但是如果Json返回数据是大例350到400的数据。它让浏览器没有响应,一些警报就像停止脚本... 我想知道我犯错误的地方Plz检查并告诉......

1 个答案:

答案 0 :(得分:9)

不要修改循环内的标记。循环结束时更新标记。

尝试更改您的成功回调,如下所示

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