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">
jquery翻书效果<option value="${de}">${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='"+de+"'>" + item.nameAndCode
+ "</option>");
});
}
});
}
依据省份获取市的代码例如以下：
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{ ProvinceInfo provinceInfo = ProvinceInfoByProperty("code", proviceCode);
List<CityInfo> cityList = CityListByProperty("belongProvinceId", p
// 初始化准备输出的Json串
String cityJson = "";
// 遍历集合，构造json串
if (cityList.size() > 0) {
cityJson = "{\"city\":[";
// 拼接查询到的⼦项
for (int i = 0; i < cityList.size(); i++) {
CityInfo city = (i);
String temp = "{\"code\":\"" + Code()
+ "\",\"nameAndCode\":\"" + Name()+"("+ Code() +")"
+ "\"}";
// 假设是集合中最后⼀项，则拼接结束符，否则⽤","隔开
if (i == cityList.size() - 1) {
cityJson = cityJson + temp + "]}";
} else {
cityJson = cityJson + temp + ",";
}
}
}
// 设置输出的字符集和类型并输出json串
response.setCharacterEncoding("UTF-8");
response.setContentType("json");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。