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

联动菜单代码

/*
* 这是一个省市县级联的选择器采用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("<option value=\"\">" + provDefStr + "</option>");
$(provId).show();
}
if (pct.indexOf("c") >= 0){
$(cityId).html("<option value=\"\">" + cityDefStr + "</option>");
$(cityId).show();
}
if (pct.indexOf("t") >= 0){
$(townId).html("<option value=\"\">" + townDefStr + "</option>");
$(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("<option value=\"\">"+loadingStr+"</option>");
}
//发送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 += "<option value=\"" + id + "\">" + name + "</option>\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("<option value=\"\">加载失败: " + e1 + "," + e2 + "</option>");
}
//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();
});


<select id="province"></select>
<select id="city"></select>
<select id="town"></select>



ajax页面(数据源)

<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>

<%!
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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值