读书人

小弟我写的全国省市县三级联动菜单拿

发布时间: 2012-11-13 10:00:50 作者: rapoo

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

/* * 这是一个省市县级联的选择器采用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,县级市/旗=3parentid表示父行政单位的id,父行政单位,也就是管它的那一级,省/直辖市的parentid均为0,其他根据行政规划而定。例如:昌平区的parentid就是北京市的id。表结构为:china_area||———id bigint 主键|———name varchar 地区名|———level int 级别|———parentid bigint 父行政单位id
1 楼 cpszy 2011-12-15 lz的数据表结构是什么样的? 2 楼 kong0itey 2011-12-19 cpszy 写道lz的数据表结构是什么样的?
已经补充说明了

读书人网 >软件架构设计

热点推荐