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。这将使您的界面FEEL像移动表单，它与标准网页表单不同。这样做需要您使用标准选择框，这些选择框在Kendo UI移动应用程序内部具有增强的行为，因为它与MVVM模式有关。您可以绑定它们的源，值，事件以及文本和值字段。

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

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

选择下拉列表另一个下拉列表是不可见的kendo ui mobile

1 个答案: