0

2つのドロップダウンリストがあります。1つはカテゴリで、もう1つは製品です。カテゴリドロップダウンリストを選択する場合、そのカテゴリに従って、製品は製品ドロップダウンリストにバインドする必要があります。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

この場合、KendoUIモバイルフォーム要素を使用することをお勧めします。これにより、インターフェイスは、標準のWebページフォームとは異なるモバイルフォームのように感じられます。そのためには、MVVMパターンに関連するKendoUIモバイルアプリケーション内で動作が強化された標準の選択ボックスを使用する必要があります。ソース、値、イベント、およびテキストフィールドと値フィールドをバインドできます。

これは、2つの選択リストを持つKendoUIモバイルフォームを使用した例です。選択されるカテゴリは、選択される製品で選択された値によって異なります。

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

于 2013-01-07T22:24:32.150 に答える