兩級聯動的實現

? ? ? ? ? 在ITOO中有一個需求，就是根據考試的名稱，自動的獲取該考試所有的考場名稱，此時，就用到了兩級聯動的效果。

? ? ? ? ??這里，使用JavaScript實現。

? ? ? ? ??首先，前臺的頁面顯示使用EasyUI的組件，第一個組件調用的controller中一個類的方法，獲取所有的考試名稱。

<span style="font-size:24px;"><div style="width: 200px; margin-top: 50px; margin-left: 50px;">@* 1.加載所有的考試名稱 *@請選擇考試名稱：<select id="ExamName" class="easyui-combobox" name="ExamName" style="width: 150px; margin-right: 100px;"url="/MonitoreRecord/QueryQuestion";valueField="ExamID" textField="ExamName" required="true" editable="false"></select></div><div style="width: 200px; margin-top: -40px; margin-left: 250px;">@* 2.根據考試名稱加載考場名稱 *@請選擇考場名稱：<select name="ExamPlace" id="ExamPlace" class="easyui-combobox" style="width: 150px;" valueField="ExamPlaceID" textField="ExamPlace" required="true" editable="false"></select></div> </span>

? ? ? ? ??第二個組件，考場的加載是通過js實現的，具體的代碼如下：

<span style="font-size:24px;"><script type="text/javascript">$(function () {var OrganizationID = "";$('#ExamName').combobox({onSelect: function () {OrganizationID = $('#ExamName').combobox('getValue');$('#ExamPlace').combobox({textField: 'ExamPlace',editable: false,url: '/InitExam/QueryExamPlaceByExamID?ExamID=' + OrganizationID,});}});})</script> </span>

? ? ? ? ??首先，設置兩個組件的id，通過getValue方法獲取第一個組件的內容，然后，調用controller的一個類的根據考試ID查詢考場的方法，這個方法返回的JSON串。

? ? ? ? ??直接，令第一個組件中的ExamID，等于第二個組件返回JSON串中的ExamID即可。

?

?

總結

以上是生活随笔為你收集整理的两级联动的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。