联动菜单代码
-
-
-
-
-
-
-
-
-
- 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;
-
-
-
-
-
-
-
-
-
-
-
- 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();
- }
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
- var asynGetArea = function(objId, param,listeners) {
-
- var bef = function() {
- $(objId).html("<option value=\"\">"+loadingStr+"</option>");
- }
-
- 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);
- }
-
- 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();
- }
-
- var err = function(e1, e2) {
- $(objId).html("<option value=\"\">加载失败: " + e1 + "," + e2 + "</option>");
- }
-
- var asynConfig = {
- type : asynMethod,
- cache : asynCache,
- url : asynSrc,
- data : param,
- timeout : asynTimeout,
- beforeSend : bef,
- success : successWarpper,
- error : err
- };
-
- $.ajax(asynConfig);
- }
-
-
-
-
-
-
-
- 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
|