1. 程式人生 > >實現兩個select之間的兩極聯動

實現兩個select之間的兩極聯動

選擇第一個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;
	}