JQuery打造下拉框联动效果

做联动效果，若是用纯JavaScript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用JQuery实现比较容易，代码以省市联动效果为例实现。--------------------------------------分割线 --------------------------------------jQuery权威指南 PDF版中文+配套源代码 http://www.linuxidc.com/Linux/2013-10/91059.htmjQuery实战中文PDF+源码 http://www.linuxidc.com/Linux/2013-09/90631.htm《jQuery即学即用（双色）》 PDF+源代码 http://www.linuxidc.com/Linux/2013-09/90383.htm锋利的jQuery（第2版）完整版PDF+源码 http://www.linuxidc.com/Linux/2013-10/91527.htmjQuery完成带复选框的表格行高亮显示 http://www.linuxidc.com/Linux/2013-08/89406.htmjQuery基础教程（第4版） PDF 完整高清版+配套源码 http://www.linuxidc.com/Linux/2014-03/98162.htm--------------------------------------分割线 --------------------------------------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）;
}jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-06/102864.htm