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

kong0itey

浏览: 298988 次

最近访客更多访客>>

waylon33

ybfjavaeye

haoningabc

lg13583505049

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

原创前端 java javascript 联动

联动菜单代码

/*
 * 这是一个省市县级联的选择器采用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

分享到：