省市三级联动 java_我写的全国省市县三级联动菜单,拿出来和大家分享了(原创)...

这是一个使用Java编写的省市县三级联动选择器,通过AJAX获取数据源,根据level和parentid参数动态加载地区信息。文章详细介绍了代码结构和使用方法,并提供了数据库查询页面的示例。
摘要由CSDN通过智能技术生成

/*

* 这是一个省市县级联的选择器采用ajax的方式来调用数据源

* ajax页面接收2个参数,level和parentid,这2个参数作为查询条件

* 其中level代表地区等级,1=省,2=市,3=县

* 另一个参数parentid代表要查询的地区的父级地区

* ajax取到的结果是字符串序列(例如:235,潮州市;236,东莞市;237,佛山市;238)

*

*/

function AreaPicker(config) {

/*

* 私有属性

*/

var provId = "#" + config.provId;

var cityId = "#" + config.cityId;

var townId = "#" + config.townId;

var provDefStr = config.provDefStr? config.provDefStr : "请选择省份";

var cityDefStr = config.cityDefStr? config.cityDefStr : "请选择地区";

var townDefStr = config.townDefStr? config.townDefStr : "请选择县市";

var loadingStr = config.loadingStr? config.loadingStr : "正在加载...";

var asynSrc = config.url;

var asynTimeout = config.timeout ?config.timeout : 5000;

var asynMethod = config.method? config.method : "post";

var asynCache = config.cache? config.cache : false;

/**

* 私有方法,作用是初始化选择器的三个下拉框

*

* @param pct

* 参数(p=省,c=地,t=县)

*/

var initSelect = function(pct) {

if (pct.indexOf("p") >= 0) {

$(provId).html("" + provDefStr + "");

$(provId).show();

}

if (pct.indexOf("c") >= 0){

$(cityId).html("" + cityDefStr + "");

$(cityId).show();

}

if (pct.indexOf("t") >= 0){

$(townId).html("" + townDefStr + "");

$(townId).show();

}

}

/**

* 私有方法,作用是从数据源页面异步读取地区信息,根据objId,填充到相应的select中

*

* @param objId

* 用来装查询结果的下拉框对象的id

* @param param

* 传送给数据源页面的参数,格式为{param:1,level:1}

* @returns 数据源页面的输出内容(例如:235,潮州市;236,东莞市;237,佛山市;238)

*/

var asynGetArea = function(objId, param,listeners) {

//发送ajax之前

var bef = function() {

$(objId).html(""+loadingStr+"");

}

//发送ajax之后并且服务器返回成功

var succ = function(code) {

if (!code || $.trim(code).length==0) {

$(objId).hide();

return;

}

var htmlCode = "";

var tempArray = code.split(";");

for ( var i = 0; i < tempArray.length; i++) {

var tempArray1 = tempArray[i].split(",");

var id = tempArray1.length >= 1 ? tempArray1[0] : null;

var name = tempArray1.length >= 2 ? tempArray1[1] : null;

htmlCode += "" + name + "\n";

}

$(objId).html(htmlCode);

}

//success方法的包裹方法,用于实现事件监听

var successWarpper = function(data) {

var befSuccessListener = listeners?listeners.befSuccessListener:null;

if(befSuccessListener && (typeof befSuccessListener=="function"))

befSuccessListener();

succ(data);

var aftSuccessListener = listeners?listeners.aftSuccessListener:null;

if(aftSuccessListener && (typeof aftSuccessListener=="function"))

aftSuccessListener();

}

//发送ajax之后并且状态错误

var err = function(e1, e2) {

$(objId).html("加载失败: " + e1 + "," + e2 + "");

}

//ajax各种配置项

var asynConfig = {

type : asynMethod,

cache : asynCache,

url : asynSrc,

data : param,

timeout : asynTimeout,

beforeSend : bef,

success : successWarpper,

error : err

};

//发出请求

$.ajax(asynConfig);

}

/**

* 绑定下拉列表的change和focus事件,用来实现联动效果

*/

var bindSelect = function() {

//省份下拉框改变事件的处理函数

var provChange = function() {

initSelect("ct");

var selectVal = $(provId).val();

var listeners = {aftSuccessListener:function(){

cityChange();

}};

if (selectVal)

asynGetArea(cityId, {

level : -1,

parentid : selectVal

},listeners);

}

//城市下拉框改变事件的处理函数

var cityChange = function() {

initSelect("t");

var selectVal = $(cityId).val();

if (selectVal)

asynGetArea(townId, {

level : -1,

parentid : selectVal

});

}

//绑定地级下拉框获得焦点事件

var cityFocus = function() {

if ($(cityId + " option").length > 0 && $(cityId).val())

return;

provChange();

}

//绑定县市下拉框获得焦点事件

var townFocus = function() {

if ($(townId + " option").length > 0 && $(townId).val())

return;

cityChange();

}

//绑定各个事件

$(provId).change(provChange);

$(cityId).change(cityChange);

$(cityId).focus(cityFocus);

$(townId).focus(townFocus);

}

/**

* 公有方法,用来初始化地区选择器,暴露给外部调用的入口

*/

return {

pick : function() {

initSelect("pct");

asynGetArea(provId, {

level : 1,

parentid : -1

});

bindSelect();

}

}

}

调用方式

$(function() {

var areaPicker = new AreaPicker({provId:"province",cityId:"city",townId:"town",url:"ajax_search_area.jsp"});

areaPicker.pick();

});

ajax页面(数据源)

private static Connection conn;

private static String driver = "com.mysql.jdbc.Driver"; // 数据库驱动

private static String ulr = "jdbc:mysql://172.16.1.115:3306/test";

private static String username = "root"; // 数据库的用户名

private static String pwd = "root";// 数据库的密码

static {

try {

Class.forName(driver);

conn = DriverManager.getConnection(ulr, username, pwd);

conn.setAutoCommit(false);

} catch (ClassNotFoundException e) {

e.printStackTrace();

System.exit(-1);

} catch (SQLException e) {

e.printStackTrace();

System.exit(-1);

}

}

%>

//清除缓存

response.setHeader("Pragma","No-cache");

response.setHeader("Cache-Control","no-cache");

response.setDateHeader("Expires", 0);

out.clear();

//接收参数

int level = -1;

String levelStr = request.getParameter("level");

if(levelStr!=null && levelStr.matches("^\\d+$"))

level = Integer.parseInt(levelStr);

String parentidStr = request.getParameter("parentid");

long parentid = -1;

if(parentidStr!=null && parentidStr.matches("^\\d+$"))

parentid = Long.parseLong(parentidStr);

//查询数据

if(level<0 && parentid<0)

return;

if(level>=0 && parentid<0) {

String sql = "select id,name from china_area where level=? order by id asc;";

PreparedStatement ps = conn.prepareStatement(sql);

ps.setInt(1, level);

ResultSet rs = ps.executeQuery();

StringBuffer sb = new StringBuffer();

while (rs.next()) {

sb.append(";"+rs.getLong("id")+","+rs.getString("name"));

}

rs.close();

ps.close();

if(sb.length()>0)

sb.delete(0, 1);

out.print(sb.toString());

}

if(level<0 && parentid>=0) {

String sql = "select id,name from china_area where parentid=? order by id asc;";

PreparedStatement ps = conn.prepareStatement(sql);

ps.setLong(1, parentid);

ResultSet rs = ps.executeQuery();

StringBuffer sb = new StringBuffer();

while (rs.next()) {

sb.append(";"+rs.getLong("id")+","+rs.getString("name"));

}

rs.close();

ps.close();

if(sb.length()>0)

sb.delete(0, 1);

out.print(sb.toString());

}

if(level>=0 && parentid>=0) {

String sql = "select id,name from china_area where level=? and parentid=? order by id asc;";

PreparedStatement ps = conn.prepareStatement(sql);

ps.setInt(1, level);

ps.setLong(2, parentid);

ResultSet rs = ps.executeQuery();

StringBuffer sb = new StringBuffer();

while (rs.next()) {

sb.append(";"+rs.getLong("id")+","+rs.getString("name"));

}

rs.close();

ps.close();

if(sb.length()>0)

sb.delete(0, 1);

out.print(sb.toString());

}

%>

数据库表结构说明:

jsp查询页面接收parentid和level这2个参数,参数的值如果小于0,则表示没有传这个参数。

level表示行政单位的等级:省/直辖市=1,地级市/盟=2,县级市/旗=3

parentid表示父行政单位的id,父行政单位,也就是管它的那一级,省/直辖市的parentid均为0,其他根据行政规划而定。例如:昌平区的parentid就是北京市的id。

表结构为:

china_area

|

|———id bigint 主键

|———name varchar 地区名

|———level int 级别

|———parentid bigint 父行政单位id

分享到:

18e900b8666ce6f233d25ec02f95ee59.png

72dd548719f0ace4d5f9bca64e1d7715.png

2011-12-09 14:55

浏览 12961

评论

5 楼

qq_15138059

2015-07-14

919e2ef9987f41ae71da2c7bbc6dffe0.gif 

0956f0a970daab536ce4be0ee96b00ac.gif 

0956f0a970daab536ce4be0ee96b00ac.gif 

38687d1a1ad71d37c86f287056834d1a.gif 

38687d1a1ad71d37c86f287056834d1a.gif 

38687d1a1ad71d37c86f287056834d1a.gif 

38687d1a1ad71d37c86f287056834d1a.gif 

4f3d2719f5ed48d66098a38c464521d1.gif 

4f3d2719f5ed48d66098a38c464521d1.gif 

4038fc4bf9f977fecd6135149c7787dc.gif 

4038fc4bf9f977fecd6135149c7787dc.gif 

319668d0a4932b9d275ae47da8be0b76.gif 

319668d0a4932b9d275ae47da8be0b76.gif 

319668d0a4932b9d275ae47da8be0b76.gif

4 楼

从此醉

2014-01-18

好吧~~~~~~~~

3 楼

MRmicheal

2013-03-26

大神能把数据导出成一个.sql文件贴出来吗?现在急需这个数据sql文件

38687d1a1ad71d37c86f287056834d1a.gif

2 楼

kong0itey

2011-12-19

cpszy 写道

lz的数据表结构是什么样的?

已经补充说明了

1 楼

cpszy

2011-12-15

lz的数据表结构是什么样的?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值