新做了一個下拉框聯動的小功能，網上找的是省市級聯，之前也套用了，這次是自定義的一個級聯，相當於父子關係，有如下兩張表：

表A： （分類表）（相當於主選單）

表B： （目錄表）（相當於子選單）

注：LinkNumber是相當於一個序號 ，兩張表之間用ClassNumber關聯

前臺資訊填寫如下：

分類名稱下拉框程式碼：

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
                                            <div>分類名稱: </div>
                                            <div id="_divTxtClass">
                                                <input class="easyui-textbox" id="txtClassName" type="text" data-options="prompt:'請輸入分類名稱',required:true" style="width: 100%; height: 32px">
                                            </div>
                                            <div id="_divSeleClass">
                                                <input style="width: 300px; height: 32px;" id="seleClass" class="easyui-combobox"
                                                       name="language"
                                                       data-options="
					                            url:'http://xxx/api/GetNavClass',
					                            method:'get',
					                            valueField:'ClassNumber',
					                            textField:'ClassName',
					                            panelHeight:'auto',
                                                   editable:false,
                                                   required:true">
                                            </div>
                                        </div>
 

下面是通過下拉框的切換事件來改變目錄下拉框的值，這裡首先繫結value和text為表B的目錄編號和目錄名稱：

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
                                            <div>目錄名稱: </div>
                                            <div id="_divTxtLink">
                                                <input class="easyui-textbox" id="txtLinkName" type="text" data-options="prompt:'請輸入目錄名稱',required:true" style="width: 100%; height: 32px">
                                            </div>
                                            <div id="_divSeleLink">
                                                <input style="width: 300px; height: 32px;" id="seleLink" class="easyui-combobox"
                                                       name="language"
                                                       data-options="
					                            method:'get',
					                            valueField:'LinkId',
					                            textField:'LinkName',
					                            panelHeight:'auto',
                                                   editable:false,
                                                   required:true"></div>
 

$('#seleClass').combobox({
                onSelect: function (row) {
                    if (row != null) {
                        $('#seleLink').combobox({
                            url: "http://xxx/api/GetNavLink?classNumber=" + row.ClassNumber
                        });
                    }
                }
            });
 

 public IEnumerable<NavLink> FindLinkByNum(string classNumber)
        {
            if (string.IsNullOrWhiteSpace(classNumber))
            {
                return null;
            }
            var query = QueryFactory.DB<NavLink>().Where(c => c.ClassNumber.Equals(classNumber));
            var result = query.ToList();
            return result;
        }

這裡是效果圖來兩張~

到這裡大概就結束了，主要是利用combobox的下拉框改變事件來實現以上功能的，如果有需要給預設值，可以通過頁面url引數傳值到當前頁，然後預設值用下面介個js來實現：

$('#cc').combobox({
onLoadSuccess ：function（）{
$('#cc').combobox('select','選項的valueField');
}