实现两个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;
	}