0

我有两个下拉列表，一个是类别，另一个是产品。当我选择类别下拉列表时，根据该类别，产品必须绑定到产品下拉列表，从 Web 服务数据进入产品下拉列表，但在选择之前不可见作为一个普通页面（没有选择）产品下拉列表是可见的。

在这里我提供我的代码

 $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebService.asmx/ToFillCategoryDropDown",
        dataType: "json",
        success: function (data) {
            var dataSource = [];
            for (i = 0; i < data.d.length; i++) {
                dataSource.push({ "CategoryName": data.d[i].CategoryName })
            };
            $("#ddlCategory").kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField:"CategoryName",
                dataSource: dataSource,
                change: ChangeWeek
            });
        },
        failure: function (msg) {
            alert(msg);
        }
    });

   $("#ddlProduct").kendoDropDownList();

    function ChangeWeek(e) {
        var ddlddlProduct = $("#ddlProduct");     //appending values..
        //debugger
        var ddlCat = $("#ddlCategory").data("kendoDropDownList");       //passin fiscalmonth value
        var dataItem = ddlCat.text();
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/ToFillProductDropDown", //controllerName/MethodName
            data: "{'CategoryName':'" + dataItem + "'}",
            dataType: "json",
            async: false,
            success: function (data) {
                ddlReportWeek.empty();
                var dataSource = [];
                for (i = 0; i < data.d.length; i++) {
                    dataSource.push({ "ProductName": data.d[i].ProductName })
                };
                $("#ddlProduct").kendoDropDownList({
                    dataTextField: "ProductName",
                    dataSource: dataSource,
                    isVisible: true
                });
            },
            failure: function (msg) {
                alert(msg);
            }
        });
    }
    var app = new kendo.mobile.Application();
4

1 回答 1

0

在这种情况下，使用Kendo UI Mobile Form Elements可能会更好。这将使您的界面感觉像一个与标准网页表单不同的移动表单。这样做需要您使用标准选择框，这些选择框在 Kendo UI 移动应用程序中具有增强的行为，因为它与 MVVM 模式有关。您可以绑定它们的源、值、事件以及文本和值字段。

这是一个使用带有 2 个选择列表的 Kendo UI Mobile 表单的示例。类别选择取决于产品选择中选择的值。

http://jsbin.com/eyibap/1/edit

于 2013-01-07T22:24:32.150 回答