實現兩個select之間的兩極聯動
阿新 • • 發佈:2019-01-08
選擇第一個select框中的銀行時, 在第二個人select中顯示所有的渠道。
思路: 在第一個select框上加一個改變值得事件, 當值改變是觸發ajax請求, 或去選中銀行下的所有渠道的資料, 然後通過迴圈加option加在第二個select上。
<tr> <td width="40%"> <table> <tr> <td align="right"> <label class="control-label x80">渠道:</label> </td> <td align="left"> <select name="bankNo" id="bankNoEntrust" data-toggle="selectpicker" > <#list bankList as bank> <option value="${bank.key}" <#if commonForm??&&commonForm.bankNo??&&commonForm.bankNo?string==bank.key>selected</#if>>${bank.value}</option> </#list> </select> <select name="channelNo" id="channelNoEntrust" data-toggle="selectpicker" data-val="${commonForm.channelNo!''}" > <#list channelList as channel> <option value="${channel.key}" <#if commonForm??&&commonForm.channelNo??&&commonForm.channelNo?string==channel.key>selected</#if>>${channel.value}</option> </#list> </select> </td> </tr> </table> </td> </tr>
//通過選中的銀行發ajax請求, 獲取渠道的資料
<script type="text/javascript"> $(function (){ $("#bankNoEntrust").change(function(){ var bankNo = $("#bankNoEntrust").val(); $("#channelNoEntrust option").remove(); $.ajax({ type:"POST", url: "${base}/reconBillOrderEntrust/autoChannel.htm", data:{'bankNo':bankNo}, success: function(data){ console.log(data); if(data != null && data.length > 0){ var html=""; for(var i=0; i<data.length; i++){ html+="<option value='"+data[i].key+"'>"+data[i].value+"</option>"; } } $("#channelNoEntrust").html(html).selectpicker('refresh'); } }) }); });
//後臺處理程式碼:
@RequestMapping("/autoChannel") @ResponseBody public List<Kav> autoChannel(HttpServletRequest request, HttpServletResponse response, @ModelAttribute ReconBillOrderProcessForm form){ List<Kav> l_kavs = initKav(); //如果為空,直接返回 if (form.getBankNo() == null){ return l_kavs; } //最終返回根據銀行返回的託收渠道 List<ReconChannelDto> trustChannelDtoList = new ArrayList<ReconChannelDto>(); ReconChannelForQuery queryChannel = new ReconChannelForQuery(); queryChannel.setBankNo(form.getBankNo()); //根據銀行查詢渠道集合 List<ReconChannelDto> channelListByBankNo = reconChannelService.query(queryChannel); ReconBankTransTypeForQuery queryEntust = new ReconBankTransTypeForQuery(); queryEntust.setSysTransType(TransType.Entrust_Accept.getKey().toString()); //託收的所有的渠道 List<ReconChannelDto> channelDtoOfAllList = new ArrayList<ReconChannelDto>(); List<String> channelDtoOfAllChannelNoList = new ArrayList<String>();//託收所有的渠道編號集合 List<ReconBankTransTypeDto> reconBankTransTypeDtoList = reconBankTransTypeService.query(queryEntust); for (ReconBankTransTypeDto dto : reconBankTransTypeDtoList){ ReconChannelForQuery query = new ReconChannelForQuery(); query.setChannelNo(dto.getChannelNo()); List<ReconChannelDto> reconChannelDtoList = reconChannelService.query(query); if (CollectionUtils.isEmpty(reconChannelDtoList)){ continue; } channelDtoOfAllList.add(reconChannelDtoList.get(0)); channelDtoOfAllChannelNoList.add(dto.getChannelNo()); } //最終返回根據銀行返回的託收渠道 for (ReconChannelDto dto : channelListByBankNo){ if (channelDtoOfAllChannelNoList.contains(dto.getChannelNo())){ trustChannelDtoList.add(dto); } } for (ReconChannelDto dto : trustChannelDtoList){ Kav k = new Kav(); k.setKey(dto.getChannelNo()); k.setValue(dto.getChannelName()); l_kavs.add(k); } return l_kavs; }