JQuery打造下拉框联动效果

做联动效果，若是用纯JavaScript来做，往往须要辅助页面保存须要刷新的结果集，然后渲染到原页面。考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框所有清除，然后又一次拼接刷新的内容。用JQuery实现比較easy，代码以省市联动效果为例实现。

JSP页面代码例如以下：

<li id="base">
	<p>生源地:</p>
	<label>
           <select id="provinceCode" name="provinceCode" onchange="refreshCity()">
		<option value="">所有</option>
		<c:forEach items="${provinceInfoList}" var="provinceInfo">
			<option value="${provinceInfo.code}">${provinceInfo.provinceName}</option>
		</c:forEach>
	   </select>
        </label>
 </li>

JavaScript代码例如以下：

function refreshCity(){
	if($('#provinceCode').find('option:selected').val() == ""){
		$('#provinceCode').parent().nextAll('lable').remove();
		return;
	}
	//省份名称
	var provinceName = $('#provinceCode').find('option:selected').text();
	provinceName = provinceName.substring(0,provinceName.length-4);
	// 发出Json请求，查询子下拉框选项数据
	 $.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
		 proviceCode : $('#provinceCode').val()
	}, function(data) {
		// 假设有子选项，则创建子下拉框
		if(data != null){
			// 删除下拉框父级<lable>后的全部同级<lable>
			$('#provinceCode').parent().nextAll('lable').remove();
			var childId = "city";
			// 推断是否存在下一级下拉框 不存在就创建
			if($('#'+childId).length == 0){
				// 创建一个<li>并创建一个<select>加入到id为extra的<ul>中
				$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base'));
			}else{
				//清空子下拉框内容
				 $('#' + childId).empty();
			}
			// 遍历json串，填充子下拉框
			$.each(data.city, function(i, item) {
				$('#' + childId).append(
						"<option value='"+item.code+"'>" + item.nameAndCode
								+ "</option>");
			});
		}
	});
}

依据省份获取市的代码例如以下：

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
	ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
	List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");
	// 初始化准备输出的Json串
	String cityJson = "";
	// 遍历集合，构造json串
	if (cityList.size() > 0) {
		cityJson = "{\"city\":[";
		// 拼接查询到的子项
		for (int i = 0; i < cityList.size(); i++) {
			CityInfo city = cityList.get(i);
			String temp = "{\"code\":\"" + city.getCode()
					+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"
					+ "\"}";
			// 假设是集合中最后一项，则拼接结束符，否则用","隔开
			if (i == cityList.size() - 1) {
				cityJson = cityJson + temp + "]}";
			} else {
				cityJson = cityJson + temp + ",";
			}
		}
	}
	// 设置输出的字符集和类型并输出json串
	response.setCharacterEncoding("UTF-8");
	response.setContentType("json");
	response.getWriter().print(cityJson);
}