0

我有 10 个控件。一个主要的下拉菜单应该决定其他 9 个控件的设置。这 9 个控件是 3 行，每行 3 个下拉框。这是一个例子：

如果 dropdownMain 选择了“地址”，则将 dropdownbox1 设置为“LastName”，将 dropdownbox2 设置为“=”，并将 dropdownbox3 设置为文本框。

将 dropdownbox4 设置为 'FirstName' 并将 dropdownbox5 设置为 '=' 并将 dropdownbox6 设置为文本框。

将 dropdownbox7 设置为“City”并将 dropdownbox8 设置为“=”并将 dropdownbox9 设置为绑定到城市 json。

你如何告诉 Kendo 控件响应第一个选择然后级联？或者您可以通过 JSON 发送来设置“默认配置”吗？我从 ArcGIS Server SOE（服务器对象扩展）发送。

提前致谢！

4

1 回答 1

0

好的，这演示了一种根据我的理解来解决您的问题的方法。我只使用了 1 行 3 个下拉菜单，而不是 1 个主下拉菜单，然后是另外 3 行下拉菜单，但是，它很容易适应您的需求：

HTML（1 行，共 3 行）：

<select id="DropDownList1" name="DropDownList1"></select>
<select id="DropDownList2" name="DropDownList2"></select>
<span id="List">
    <select id="DropDownList3" name="DropDownList3"></select></span>
<span id="Text" style="display: none" >
    <input id="EnterText" class="k-textbox" /></span>

JS、剑道 UI、jQuery、jQuery UI：

var dataModel1 = [{ItemName: 'First Name', ItemId: 1},{ItemName: 'Middle Name', ItemId: 2},{ItemName: 'Last Name', ItemId: 3},{ItemName: 'Preferrred Name', ItemId: 4}];

var dataModel2 = [{ItemName: 'Equals', ItemId: 1},{ItemName: 'Contains', ItemId: 2},{ItemName: 'Starts With', ItemId: 3},{ItemName: 'Ends With', ItemId: 4}];

var dataModel3 = [{ItemName: 'John', ItemId: 1},{ItemName: 'Dave', ItemId: 2},{ItemName: 'Simon', ItemId: 3},{ItemName: 'Eric', ItemId: 4}];

$('#DropDownList1').kendoDropDownList({
    optionLabel: 'Select item...',
    dataTextField: 'ItemName',
    dataValueField: 'ItemId',
    change: function(e) {
        var that = this, ddlQuery = $('#DropDownList2').data('kendoDropDownList');

        if(ddlQuery !== undefined) {
            switch(that.value()) {
                case '1':
                    ddlQuery.value('2');
                    break;
                default: break;
            }
        }
    },
    dataSource: {
        data: dataModel1,
        schema: {
            data: function(response) { return response || {}; }
        }
    }
});

$('#DropDownList2').kendoDropDownList({
    optionLabel: 'Select item...',
    dataTextField: 'ItemName',
    dataValueField: 'ItemId',
    change: function(e) {
         var that = this, ddlQuery = $('#DropDownList3').data('kendoDropDownList');
        if(ddlQuery !== undefined) {
        switch(that.value()) {
            case '1':
                 $('#List').fadeOut('fast', function() {
                     $('#Text').fadeIn();
                });
                break;
            default:
                $('#Text').fadeOut('fast', function() {
                     $('#List').fadeIn();
                });
                break;
            }
        }
    },
    dataSource: {
        data: dataModel2,
        schema: {
            data: function(response) { return response || {}; }
        }
    }
});

$('#DropDownList3').kendoDropDownList({
    optionLabel: 'Select item...',
    dataTextField: 'ItemName',
    dataValueField: 'ItemId',
    change: function(e) {

    },
    dataSource: {
        data: dataModel3,
        schema: {
            data: function(response) { return response || {}; }
        }
    }
});

可以在这里看到 jsFiddle：

http://jsfiddle.net/8PW98/17/

我希望这有帮助...

于 2013-10-16T09:15:41.230 回答