当前位置: 编程技术>WEB前端
JQuery打造省市下拉框联动效果
来源: 互联网 发布时间:2014-08-25
本文导语: 做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重...
做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容。用JQuery实现比较容易,代码以省市联动效果为例实现。
JSP页面代码如下:
全部
${provinceInfo.provinceName}
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("baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 如果有子选项,则创建子下拉框
if(data != null){
// 删除下拉框父级后的所有同级
$('#provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// 判断是否存在下一级下拉框 不存在就创建
if($('#'+childId).length == 0){
// 创建一个并创建一个添加到id为extra的 ").appendTo($('#base'));
}else{
//清空子下拉框内容
$('#' + childId).empty();
}
// 遍历json串,填充子下拉框
$.each(data.city, function(i, item) {
$('#' + childId).append(
"" + item.nameAndCode
+ "");
});
}
});
}
根据省份获取市的代码如下:
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
List 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);
}
JSP页面代码如下:
代码如下:
生源地:
全部
${provinceInfo.provinceName}
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("baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 如果有子选项,则创建子下拉框
if(data != null){
// 删除下拉框父级后的所有同级
$('#provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// 判断是否存在下一级下拉框 不存在就创建
if($('#'+childId).length == 0){
// 创建一个
- 中
$("
}else{
//清空子下拉框内容
$('#' + childId).empty();
}
// 遍历json串,填充子下拉框
$.each(data.city, function(i, item) {
$('#' + childId).append(
"" + item.nameAndCode
+ "");
});
}
});
}
根据省份获取市的代码如下:
代码如下:
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
List 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);
}