兩級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)

? ? ? ? ? 在ITOO中有一個(gè)需求，就是根據(jù)考試的名稱，自動(dòng)的獲取該考試所有的考場(chǎng)名稱，此時(shí)，就用到了兩級(jí)聯(lián)動(dòng)的效果。

? ? ? ? ??這里，使用JavaScript實(shí)現(xiàn)。

? ? ? ? ??首先，前臺(tái)的頁(yè)面顯示使用EasyUI的組件，第一個(gè)組件調(diào)用的controller中一個(gè)類的方法，獲取所有的考試名稱。

<span style="font-size:24px;"><div style="width: 200px; margin-top: 50px; margin-left: 50px;">@* 1.加載所有的考試名稱 *@請(qǐng)選擇考試名稱：<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.根據(jù)考試名稱加載考場(chǎng)名稱 *@請(qǐng)選擇考場(chǎng)名稱：<select name="ExamPlace" id="ExamPlace" class="easyui-combobox" style="width: 150px;" valueField="ExamPlaceID" textField="ExamPlace" required="true" editable="false"></select></div> </span>

? ? ? ? ??第二個(gè)組件，考場(chǎng)的加載是通過(guò)js實(shí)現(xiàn)的，具體的代碼如下：

<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>

? ? ? ? ??首先，設(shè)置兩個(gè)組件的id，通過(guò)getValue方法獲取第一個(gè)組件的內(nèi)容，然后，調(diào)用controller的一個(gè)類的根據(jù)考試ID查詢考場(chǎng)的方法，這個(gè)方法返回的JSON串。

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

?

?

總結(jié)

以上是生活随笔為你收集整理的两级联动的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。