EsayUI中相互關聯的下拉框
阿新 • • 發佈:2018-12-31
如何使用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中完成的下拉框的關聯:
上面的程式碼與幫助文件中不同的地方在於url的不同。因為使用的是MVC,所以就需要獲取controller中的方法來獲取資料。<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>
幫助文件真的能給我們帶來很多幫助。多看幫助文件,一定沒有錯!