选择下拉列表另一个下拉列表是不可见的剑道ui移动

Question

我有两个下拉列表，一个是类别，另一个是产品。当我选择类别下拉列表时，根据该类别的产品必须绑定到产品下拉列表，从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();

Answer 1

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

下面是一个使用Kendo UI Mobile表单的示例，其中包含两个选择列表。类别选择取决于产品选择中选择的值。

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