一、实现思路
1.获取省份的列表值,有2种方式:一是返回List集合,在页面进行迭代;二是在业务类中将下拉列表封装好,页面通过JQuery方法写入。
这里暂时采用第二种方法。
2.前台JQuery:①数据库里面需要存的值,三者都有可能,三选一(判断是否选中了下面的级联项,按选中的最低级项为准值);
②将三个下拉框的name属性设置为变量,便于动态设置;③当修改重定位时,因为数据库中只有一个地区编号,所以需要根据地区编号将所在地区给定位。
定位方法:通过判断所在地区的编号后面的零,如果是四个0结束即为省,二个0即为市,都符合为区县。
3.调用方法:①jsp页面上引用include/js/cascadeCity.js;②调用返回省列表的方法provinceOption(操作类型, 省份编号, 城市编号, 区县编号);
③修改实体类(该实体类即你要修改的那个实体类),在实体类中添加private String provinceNum;private String cityNum;private String countyNum;
及对应的get、set方法(添加实体类中变量可自定义),添加的这3个变量主要用于修改时定位用户已选城市地区。
二、实现
1.cascadeCity.js
/*
* subType - 操作类型
* pNum - 省份编号
* cityNum - 城市编号
* countyNum - 区县编号
*
*/
function provinceOption(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!provincesInfo.action",
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#province").html('' + obj.gS_Result);
if(subType == "modify") {
//给省份进行下拉框定位
$('#province option[value=' + pNum + ']').attr('selected', 'selected');
}
getCity(subType, pNum, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//改变省份时触发
function changeProvince() {
//当操作id为province的下拉框时,触发事件
$("#province").change(function() {
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
});
}
function getparmscity(){
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
}
//改变城市时触发
function changeCity() {
//当操作id为city的下拉框时,触发事件
$("#city").change(function() {
var city_value = $("select[id='city'][@selected]").val();
getCounty(operateType, city_value);
});
}
//返回城市列表
function getCity(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!cityInfo.action?gS_PNum=" + pNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#city").html('' + obj.gS_Result);
if(subType == "modify") {
//给城市定位
$('#city option[value="' + cityNum + '"]').attr('selected',true);
}
getCounty(subType, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//返回区县列表
function getCounty(subType, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!countiesInfo.action?gS_CityNum=" + cityNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#county").html('' + obj.gS_Result);
if(subType == "modify") {
//给区县定位
$('#county option[value="' + countyNum + '"]').attr('selected',true);
}
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
2.jsp页面:
……
引入js
…………
直接保存成html就能运行 cs数据不全 太长了 不让发
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
多级联动实现:
我也来插一嘴:
用ajax的dwr实现应该也可以吧?
在页面初始化的时候就把省份填好,然后调用市,区的onclick事件,将这些输入放到select中