使用 kendoComboBox 时，列表值未从 web 服务绑定到 kendoComboBox答案

【问题标题】：list values are not binding to kendoComboBox from webservice when using kendoComboBox使用 kendoComboBox 时，列表值未从 web 服务绑定到 kendoComboBox
【发布时间】：2012-11-29 08:37:31
【问题描述】：

我想通过 web 服务将值列表从数据库绑定到 kendoCombobox。

代码如下：

<select id = "CbxArea" style="width:200px">
</select>

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        
    cmbArea.kendoComboBox();  

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));
            }
        }
    });
});

值列表成功出现，但问题是组合框中仅显示第一个值，其余值未显示（列表中有 16 个值）。

如果我写cmbArea; 而不是cmbArea.kendoComboBox();，组合框中将显示总共 16 个值。 kendoComboBox 绑定 .asmx 页面的值有问题吗？

我必须仅在 kendoComboBox 中显示值。

【问题讨论】：

你不能使用剑道数据源吗？
我曾尝试使用数据源，但我收到一条错误消息，提示“Microsoft JScript 运行时错误：无法获取属性 'dataSource' 的值：对象为空或未定义”，因为其中没有数据组合框，所以它显示了我认为的错误。

标签： jquery asp.net-mvc-3 kendo-ui

【解决方案1】：

正如我在剑道论坛上回复的那样，剑道组合框不会显示附加到原始<select> 的<option> 元素。您需要在创建选项后初始化组合框：

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));


            }

            cmbArea.kendoComboBox(); 
        }
    });
});

使用 Kendo DataSource 也是一种选择，它会大大减少您的代码。

【讨论】：

你在每次迭代中初始化kendoComboBox...不应该是for循环之外的一个吗？

【解决方案2】：

由于您已将select“转换”为combobox，因此您不能直接用options 填充组合框。如果要向组合框添加新项目，则应将这些项目添加到 dataSource ：

var dataSource = cmbArea.data("kendoComboBox").dataSource;
for (i = 0; i < data.d.length; i++) {
    area = data.d[i].AreaName;
    dataSource.add({ text : area, value : area });
}

另一种方法是保持select 的营养，并在此营养之后将其转换为组合框：您必须在成功回调结束时移动cmbArea.kendoComboBox();（在for 之后循环）。

【讨论】：

【解决方案3】：

作为对 Samuel Caillerie 建议的优化并避免多次调用 dataSource.add，我建议使用接收到的数据构建一个数组，并且只调用一次 dataSource：

var dataSource = cmbArea.data("kendoComboBox").dataSource;
var areas = [];
for (var i = 0; i < data.d.length; i++) {
    areas[i] = data.d[i].AreaName;
}
dataSource.data(areas);

【讨论】：

【解决方案4】：

如果您可以使用 kendo 数据源，则可以使用它。

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;    
    cmbArea.kendoComboBox({
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "FlashReportWebService.asmx/GetAreaNames",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        },
        dataTextField: "text", //Your Text value in JSON payload
        dataValueField: "value" //Your Value value in JSON payload
    });
});

【讨论】：