如何将数据绑定到Kendo UI Mobile中的LatpDownList

Question

我一直在使用kendo Mobile来开发一个应用程序，以前我在Kendo Web中使用过的应用程序，它可以正常工作。主要问题是我必须将数据绑定到两个下拉列表，我编写的以下代码，当我的应用程序运行时，它显示了一个错误，例如" Microsoft JScript Runtime错误：对象不支持属性或方法'Append'。

在html

中

<div id="forms" data-role="view" data-title="Form Elements" data-init="initForm">
    <table>
        <tr>
            <td>
                <label style="margin-left: 20px">
                    Company:</label>
            </td>
            <td>
                <select id="ddlCompany" style="width: 200px">
                    <option>Select Company</option>
                </select>
            </td>
            <td class="style1">
                <label style="margin-left: 20px">
                    Category:</label>
            </td>
            <td>
                <select id="ddlCategory" style="width: 200px">
                    <option>Select Category</option>
                </select>
            </td>
            <td>
                <label style="margin-left: 20px">
                   Product :</label>
            </td>
            <td>
                <select id="ddlProduct" style="width: 200px">
                    <option>Select Product</option>
                </select>
            </td>
        </tr>
    </table>
</div>
   function initForm() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "FlashReportMobileWebService.asmx/GetCompany",
            dataType: "json",
            success: function (data) {
                for (i = 0; i < data.d.length; i++) {
                    ddlCompany.append($("<option></option>").val(data.d[i].Company).html(data.d[i].Company));
                };

                $("#ddlCompany").kendoDropDownList();
            }
        });
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "FlashReportMobileWebService.asmx/ToCategoryDropDown",
            dataType: "json",
            success: function (data) {
                for (i = 0; i < data.d.length; i++) {
                    ddlCategory.append($("<option></option>").val(data.d[i].Category).html(data.d[i].Category));
                };
                $("#ddlCategory").kendoDropDownList();
            },
            failure: function (msg) {
                alert(msg);
            }
        });
    }
    $("#ddlCategory").change(
        function (e) {
            var ddlProduct= $("#ddlProduct");  
            var dataItem = $("#ddlCategory").val();  
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{'Category':'" + dataItem + "'}",
                url: "FlashReportWebService.asmx/ToFillProductDropDown",
                dataType: "json",
                success: function (data) {
                    ddlProduct.empty();
                    for (i = 0; i < data.d.length; i++) {
                        ddlProduct.append($("<option></option>").val(data.d[i].ProductName).html(data.d[i].ProductName));
                    };
                    $("#ddlProduct").kendoDropDownList();
                },
                failure: function (msg) {
                    alert(msg);
                }
            });
        });
    var app = new kendo.mobile.Application(document.body);

感谢您阅读此

Answer 1

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportMobileWebService.asmx/GetCompany",
        dataType: "json",
        success: function (data) {
            var dataSource = [];
            for (i = 0; i < data.d.length; i++) {                    
                ddlCompany.push({ "Company": data.d[i].Company})
            };
            $("#ddlCompany").kendoDropDownList({
                dataTextField: "Company",
                dataSource: dataSource
            });
        }
    });

写上述代码，而不是将值附加到ddlcompany.values将绑定。