页面上对于两个selelct实现联动的效果

实现思路：在第一个selelct上绑定一个值改变事件，选中第一个selelct里面的之后， 然后获取其级联的第二个select里面所有的值， 然后遍历成option加到第二个selelct上，就了。

页面代码：

<div class="bjui-pageContent">
	<form action="" id="reconProcessZytForm"  class="pageForm" data-toggle="validate" >
		<div style="margin:15px auto 0; width:800px;">
			<fieldset>
				<legend>交易对账</legend>
				<table class="table table-condensed table-hover">
					<tbody>
						<tr>
							<td align="right"  width="41%"><label class="label-control">对账日期：</label></td>
							<td>
  								<select data-toggle="selectpicker" name="reconDate" data-width="140"
									<option value="">请选择</option>
									<#list reconDateList as reconDate>
										<option value="${reconDate}">
											${reconDate}
										</option>
									</#list>
								</select>
							<span style="color: red;">*</span>
							</td>
						</tr>
						
						<tr style="display: none">
		 					<td  align="right"><label class="control-label">单边日期：</label></td>
							<td align="left">
								<input  type="text" name="singleBeginDate" id="singleBeginDate"  value="${(processForm.singleBeginDate?string('yyyy-MM-dd'))!}"  data-toggle="datepicker"  size="11">
								-
								<input  type="text" name="singleEndDate" id="singleEndDate"  value="${(processForm.singleEndDate?string('yyyy-MM-dd'))!}"  data-toggle="datepicker"  size="11">
								<span style="color: red;">*</span>
							</td>	
						</tr>

						<tr>
							<td align="right"><label class="label-control">数据类型：</label></td>
							<td>
								<select name="dataType" id="zytDataType" data-toggle="selectpicker" data-width="200" >
								<option value=""  selected>请选择</option>
									<#if zytDataTypeKavs??>
										<#list zytDataTypeKavs as ttypes>
											<option value="${(ttypes.key)!}" >${(ttypes.value)!}</option>
										</#list>
									</#if>
								</select>	
							</td>
						</tr>

						<tr>
							<td align="right"><label class="label-control">业务类型：</label></td>
							<td>
								<select name="sysTransType" id="zytTransType" data-toggle="selectpicker" data-width="200" >
								<option value=""  selected>请选择</option>
									<#if zytTransTypeKavs??>
										<#list zytTransTypeKavs as ttypes>
											<option value="${(ttypes.key)!}" >${(ttypes.value)!}</option>
										</#list>
									</#if>
								</select>	
							</td>
						</tr>
					
					</tbody>
				</table>
				<div align="center" style="margin-top: 10px">
						<button  id="reconProcessZytBtn"  type="button" class="btn-default" >交易对账</button>
				</div>
			</fieldset>
		</div>
	</form>
</div>
<script>
$(function(){
	$("#reconProcessZytBtn").click(function(){
	    var options={	  
				url: "${base}/reconprocess/zytRecon.htm",
				data: $('#reconProcessZytForm').serialize(),
				callback:function(data){
					if(data.statusCode == 200) {
						$(this).alertmsg('correct', data.message);
					}else if(data.statusCode == 305){
						$(this).alertmsg('warn', data.message);
					}else {
						$(this).alertmsg('error', data.message);
					}
				}
			 };
			$("#reconProcessZytBtn").bjuiajax("doAjax", options);
	});
});
$(function (){
	$("#zytDataType").change(function(){
		var zytDataType = $("#zytDataType").val();
		$("#zytTransType option").remove();
		$("#zytTransType").append("<option value=''>请选择</option>");
		$.ajax({
			type:"POST",
			url: "${base}/reconProcessZyt/getTransTypeOnDataTypeChanged.htm",
			data:{'dataType':zytDataType},
			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>";
					}
				}
				$("#zytTransType").html(html).selectpicker('refresh');
			}
		})
	});
});
</script>

这个绑定第一个selelct的ajax请求：

url: "${base}/reconProcessZyt/getTransTypeOnDataTypeChanged.htm",

public enum ZytTransType {

	RECHARGE(0L,"充值"),
	CORRECT(1L,"冲正");
	
	private final Long key;

	private final String value;
	
	public String getValue() {
		return value;
	}

	public Long getKey() {
		return key;
	}

	ZytTransType(Long key, String value) {

		this.key = key;

		this.value = value;
	}
	
	/**
	 * 根据key获取value
	 * 
	 * @param key : 键值key
	 * @return String
	 */
	public static String getValueByKey(Long key) {
		ZytTransType[] enums = ZytTransType.values();
		for (int i = 0; i < enums.length; i++) {
			if (enums[i].getKey().equals(key)) {
				return enums[i].getValue();
			}
		}
		return "";
	}

	/**
	 * 转换为'KAV'列表
	 * 
	 * @return List<Kav>
	 */
	public static List<Kav> toKavs() {
		List<Kav> l_kavs = new ArrayList<Kav>();
		ZytTransType[] enums = ZytTransType.values();
		for (int i = 0; i < enums.length; i++) {
			Kav kav = new Kav();
			kav.setKey(enums[i].getKey().toString());
			kav.setValue(enums[i].getValue());
			l_kavs.add(kav);
		}
		return l_kavs;
	}

	/**
	 * 转换为MAP集合
	 * 
	 * @returnMap<String, String>
	 */
	public static Map<String, String> toMap() {
		Map<String, String> map = new HashMap<String, String>();
		ZytTransType[] enums = ZytTransType.values();
		for (int i = 0; i < enums.length; i++) {
			map.put(enums[i].getKey().toString(), enums[i].getValue());
		}
		return map;
	}
}

        /**
	 * 初始化KAV
	 * 
	 * @return List<Kav>
	 */
	private List<Kav> initKav() {
		List<Kav> l_kavs = new ArrayList<Kav>();
		Kav kav = new Kav();
		kav.setKey("");
		kav.setValue("请选择");
		l_kavs.add(kav);
		return l_kavs;
	}
	
	@RequestMapping("/getTransTypeOnDataTypeChanged")
	@ResponseBody
	public List<Kav> getTransTypeOnDataTypeChanged(HttpServletRequest request, HttpServletResponse response, @ModelAttribute ReconProcessZytForm form){
		List<Kav> l_kavs = initKav();
		Long dataType = form.getDataType();
		if(dataType==ZytTransType.RECHARGE.getKey()){
			for(Kav kav : ZytTransType.toKavs()){
				if(Long.valueOf(kav.getKey())!=1){
					l_kavs.add(kav);
				}
			}
		}else if(dataType==ZytTransType.CORRECT.getKey()){
			for(Kav kav : ZytTransType.toKavs()){
				l_kavs.add(kav);
			}
		}
		return l_kavs;
	}