0

私は10個のコントロールを持っています。他の 9 つのコントロールが何に設定されているかを決定する 1 つのメイン ドロップダウン。これらの 9 つのコントロールは、3 つのドロップダウン ボックスの 3 つの行です。次に例を示します。

dropdownMain で「Address」が選択されている場合は、dropdownbox1 を「LastName」に設定し、dropdownbox2 を「=」に設定し、dropdownbox3 をテキストボックスに設定します。

dropdownbox4 を「FirstName」に設定し、dropdownbox5 を「=」に設定し、dropdownbox6 をテキストボックスに設定します。

dropdownbox7 を「City」に設定し、dropdownbox8 を「=」に設定し、dropdownbox9 を都市 json にバインドするように設定します。

最初の選択に応答してカスケードするように剣道コントロールにどのように指示しますか? または、JSON 経由で送信して「デフォルト構成」を設定できますか? ArcGIS Server SOE (サーバー オブジェクト エクステンション) から送信しています。

前もって感謝します！

4

1 に答える 1

0

OK、これは、私が理解している問題の解決策を実装する方法を示しています。私は 3 つのドロップダウンの 1 つの行のみを使用し、メインのドロップダウンを 1 つと追加の 3 つのドロップダウンの行を使用していませんが、ニーズに合わせて簡単に調整できます。

HTML (3 行 1 行):

<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 に答える