1. 程式人生 > >EsayUI中相互關聯的下拉框

EsayUI中相互關聯的下拉框

  如何使用EsayUI控制元件來實現下拉框的關聯,例如實現:選中選擇學院下的某個學院,在選擇專業的下拉框中的內容自動變成該學院下的專業。

<span style="font-size:18px;"><input id="cc1" class="easyui-combobox" data-options="   
        valueField: 'id',   
        textField: 'text',   
        url: 'get_data1.php',   
        onSelect: function(rec){   
            var url = 'get_data2.php?id='+rec.id;   
            $('#cc2').combobox('reload', url);   
        }" />  
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" /> </span>

  上段程式碼是來自EasyUI的幫助檔案找到的。在頁面中添加了兩個下拉框,通過選中第一個下拉框的內容後,第二個下拉框的內容緊跟著改變。

  下面的例子是在MVC中完成的下拉框的關聯:

<span style="font-size:18px;"> <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">學  院:</label>
        <input id="txtDepartment" class="easyui-combobox"  editable="false"
            name="Department"
            data-options="
                    url:'/DistributeClass/GetDepartmentName',
                    method:'get',
                    valueField:'DepartmentName',
                    textField:'DepartmentName',
                    panelHeight:'auto',
             onSelect: function(rec){ 
                      var url = '/DistributeClass/GetMajor?DepartmentName='+rec.DepartmentName; 
                      $('#Major').combobox('reload', url);  
                    } 
            ">
    </div>
    @*專業*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">錄取專業:</label>
        <input id="Major" class="easyui-combobox"  editable="false"
            name="Major"
            data-options="
                    url:'/DistributeClass/GetMajor',
                    method:'get',
                    valueField:'MajorName',
                    textField:'MajorName',
                    panelHeight:'auto',
             onSelect: function(rec){ 
                      var url = '/DistributeStudentNumber/getClass?MajorName='+rec.MajorName; 
                      $('#Class').combobox('reload', url);  
                    } 
            ">
    </div>

    @*班級*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">班  級:</label>
        <input id="Class" class="easyui-combobox" editable="false"
            name="Class"
            data-options="
                    url:'/DistributeStudentNumber/getClass',
                    method:'get',
                    valueField:'ClassNumber',
                    textField:'ClassNumber',
                    panelHeight:'auto',  ">
    </div></span>
  上面的程式碼與幫助文件中不同的地方在於url的不同。因為使用的是MVC,所以就需要獲取controller中的方法來獲取資料。

  幫助文件真的能給我們帶來很多幫助。多看幫助文件,一定沒有錯!