由于项目需要需要实现一个省市联动，由于业务有一些特殊的需求，使用现有的插件略有不便，就自己实现了一个。
首先需要保存地区数据的JS数据文件，我这里命名为areaData.js，内容如下：
本文实例讲述了基于jquery实现省市联动特效的代码，分享给大家供大家参考，具体如下：
基于jquery实现二级联动效果，jquery实现联动
本文实例为大家分享了jquery实现二级联动的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</head>
<body>
<select id="province">
<option>----请选择省份----</option>
<option>北京</option>
<option>上海</option>
<option>江苏</option>
</select>
<select class="city">
<option>----请选择城市----</option>
</select>
<select class="city">
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
</select>
<select class="city">
<option>黄浦</option>
<option>卢湾</option>
<option>徐汇</option>
<option>长宁</option>
<option>静安</option>
</select>
<select class="city">
<option>南京</option>
<option>镇江</option>
<option>苏州</option>
<option>南通</option>
<option>扬州</option>
</select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持帮客之家。
本文实例为大家分享了jquery实现二级联动的具体代码，供大家参考，具体内容如下
!DOCTYPE html…
今天给大家带来使用jQuery
ajax实现的省市联动效果。我们直奔主题，先说下实现思路：
本文实例为大家分享了jquery实现二级联动的具体代码，供大家参考，具体内容如下
/**
* 保存地区信息
* 数据格式
* areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}]
* 直辖市存在-1，表示就是直辖市
*/
(function(window) {
window.areaData = [{"pro":"\u5317\u4eac","cities":{"-1":"\u5317\u4eac","0":"\u4e1c\u57ce\u533a","1":"\u897f\u57ce\u533a","4":"\u671d\u9633\u533a","5":"\u4e30\u53f0\u533a","6":"\u77f3\u666f\u5c71\u533a","7":"\u6d77\u6dc0\u533a","8":"\u95e8\u5934\u6c9f","9":"\u623f\u5c71","10":"\u901a\u5dde","11":"\u987a\u4e49","12":"\u660c\u5e73","13":"\u5927\u5174","14":"\u5e73\u8c37","15":"\u6000\u67d4","16":"\u5bc6\u4e91","17":"\u5ef6\u5e86"}},{"pro":"\u4e0a\u6d77","cities":{"-1":"\u4e0a\u6d77","0":"\u9ec4\u6d66","2":"\u5f90\u6c47","3":"\u957f\u5b81","4":"\u9759\u5b89","5":"\u666e\u9640","6":"\u95f8\u5317","7":"\u8679\u53e3","8":"\u6768\u6d66","9":"\u95f5\u884c","10":"\u5b9d\u5c71","11":"\u5609\u5b9a","12":"\u6d66\u4e1c","13":"\u91d1\u5c71","14":"\u677e\u6c5f","15":"\u9752\u6d66","17":"\u5949\u8d24","18":"\u5d07\u660e"}},{"pro":"\u5929\u6d25","cities":{"-1":"\u5929\u6d25","0":"\u548c\u5e73\u533a","1":"\u4e1c\u4e3d\u533a","2":"\u6cb3\u4e1c\u533a","3":"\u897f\u9752\u533a","4":"\u6cb3\u897f\u533a","5":"\u6d25\u5357\u533a","6":"\u5357\u5f00\u533a","7":"\u5317\u8fb0\u533a","8":"\u6cb3\u5317\u533a","9":"\u6b66\u6e05\u533a","10":"\u7ea2\u6865\u533a","14":"\u5b81\u6cb3","15":"\u9759\u6d77","16":"\u5b9d\u577b","17":"\u84df\u53bf","18":"\u6ee8\u6d77\u65b0\u533a"}},{"pro":"\u91cd\u5e86","cities":{"-1":"\u91cd\u5e86","0":"\u4e07\u5dde","1":"\u6daa\u9675","2":"\u6e1d\u4e2d","3":"\u5927\u6e21\u53e3","4":"\u6c5f\u5317","5":"\u6c99\u576a\u575d","6":"\u4e5d\u9f99\u5761","7":"\u5357\u5cb8","8":"\u5317\u789a","9":"\u4e07\u76db","10":"\u53cc\u6322","11":"\u6e1d\u5317","12":"\u5df4\u5357","13":"\u9ed4\u6c5f","14":"\u957f\u5bff","15":"\u7da6\u6c5f","16":"\u6f7c\u5357","17":"\u94dc\u6881 ","18":"\u5927\u8db3","19":"\u8363\u660c","20":"\u74a7\u5c71","21":"\u6881\u5e73","22":"\u57ce\u53e3","23":"\u4e30\u90fd","24":"\u57ab\u6c5f","25":"\u6b66\u9686","26":"\u5fe0\u53bf","27":"\u5f00\u53bf","28":"\u4e91\u9633","29":"\u5949\u8282","30":"\u5deb\u5c71","31":"\u5deb\u6eaa","32":"\u77f3\u67f1","33":"\u79c0\u5c71","34":"\u9149\u9633","35":"\u5f6d\u6c34","36":"\u6c5f\u6d25","37":"\u5408\u5ddd","38":"\u6c38\u5ddd","39":"\u5357\u5ddd"}},{"pro":"\u6cb3\u5317","cities":["\u77f3\u5bb6\u5e84","\u90af\u90f8","\u90a2\u53f0","\u4fdd\u5b9a","\u5f20\u5bb6\u53e3","\u627f\u5fb7","\u5eca\u574a","\u5510\u5c71","\u79e6\u7687\u5c9b","\u6ca7\u5dde","\u8861\u6c34"]},{"pro":"\u5c71\u897f","cities":["\u592a\u539f","\u5927\u540c","\u9633\u6cc9","\u957f\u6cbb","\u664b\u57ce","\u6714\u5dde","\u5415\u6881","\u5ffb\u5dde","\u664b\u4e2d","\u4e34\u6c7e","\u8fd0\u57ce"]},{"pro":"\u5185\u8499\u53e4","cities":["\u547c\u548c\u6d69\u7279","\u5305\u5934","\u4e4c\u6d77","\u8d64\u5cf0","\u547c\u4f26\u8d1d\u5c14\u76df","\u963f\u62c9\u5584\u76df","\u901a\u8fbd","\u5174\u5b89\u76df","\u4e4c\u5170\u5bdf\u5e03\u76df","\u9521\u6797\u90ed\u52d2\u76df","\u5df4\u5f66\u6dd6\u5c14\u76df","\u9102\u5c14\u591a\u65af"]},{"pro":"\u8fbd\u5b81","cities":["\u6c88\u9633","\u5927\u8fde","\u978d\u5c71","\u629a\u987a","\u672c\u6eaa","\u4e39\u4e1c","\u9526\u5dde","\u8425\u53e3","\u961c\u65b0","\u8fbd\u9633","\u76d8\u9526","\u94c1\u5cad","\u671d\u9633","\u846b\u82a6\u5c9b"]},{"pro":"\u5409\u6797","cities":["\u957f\u6625","\u5409\u6797","\u56db\u5e73","\u8fbd\u6e90","\u901a\u5316","\u767d\u5c71","\u677e\u539f","\u767d\u57ce","\u5ef6\u8fb9"]},{"pro":"\u9ed1\u9f99\u6c5f","cities":["\u54c8\u5c14\u6ee8","\u9f50\u9f50\u54c8\u5c14","\u7261\u4e39\u6c5f","\u4f73\u6728\u65af","\u5927\u5e86","\u7ee5\u5316","\u9e64\u5c97","\u9e21\u897f","\u9ed1\u6cb3","\u53cc\u9e2d\u5c71","\u4f0a\u6625","\u4e03\u53f0\u6cb3","\u5927\u5174\u5b89\u5cad"]},{"pro":"\u6c5f\u82cf","cities":["\u5357\u4eac","\u9547\u6c5f","\u82cf\u5dde","\u5357\u901a","\u626c\u5dde","\u76d0\u57ce","\u5f90\u5dde","\u8fde\u4e91\u6e2f","\u5e38\u5dde","\u65e0\u9521","\u5bbf\u8fc1","\u6cf0\u5dde","\u6dee\u5b89"]},{"pro":"\u6d59\u6c5f","cities":["\u676d\u5dde","\u5b81\u6ce2","\u6e29\u5dde","\u5609\u5174","\u6e56\u5dde","\u7ecd\u5174","\u91d1\u534e","\u8862\u5dde","\u821f\u5c71","\u53f0\u5dde","\u4e3d\u6c34"]},{"pro":"\u5b89\u5fbd","cities":{"0":"\u5408\u80a5","1":"\u829c\u6e56","2":"\u868c\u57e0","3":"\u9a6c\u978d\u5c71","4":"\u6dee\u5317","5":"\u94dc\u9675","6":"\u5b89\u5e86","7":"\u9ec4\u5c71","8":"\u6ec1\u5dde","9":"\u5bbf\u5dde","10":"\u6c60\u5dde","11":"\u6dee\u5357","13":"\u961c\u9633","14":"\u516d\u5b89","15":"\u5ba3\u57ce","16":"\u4eb3\u5dde"}},{"pro":"\u798f\u5efa","cities":["\u798f\u5dde","\u53a6\u95e8","\u8386\u7530","\u4e09\u660e","\u6cc9\u5dde","\u6f33\u5dde","\u5357\u5e73","\u9f99\u5ca9","\u5b81\u5fb7"]},{"pro":"\u6c5f\u897f","cities":["\u5357\u660c\u5e02","\u666f\u5fb7\u9547","\u4e5d\u6c5f","\u9e70\u6f6d","\u840d\u4e61","\u65b0\u4f59","\u8d63\u5dde","\u5409\u5b89","\u5b9c\u6625","\u629a\u5dde","\u4e0a\u9976"]},{"pro":"\u5c71\u4e1c","cities":["\u6d4e\u5357","\u9752\u5c9b","\u6dc4\u535a","\u67a3\u5e84","\u4e1c\u8425","\u70df\u53f0","\u6f4d\u574a","\u6d4e\u5b81","\u6cf0\u5b89","\u5a01\u6d77","\u65e5\u7167","\u83b1\u829c","\u4e34\u6c82","\u5fb7\u5dde","\u804a\u57ce","\u6ee8\u5dde","\u83cf\u6cfd"]},{"pro":"\u6cb3\u5357","cities":["\u90d1\u5dde","\u5f00\u5c01","\u6d1b\u9633","\u5e73\u9876\u5c71","\u5b89\u9633","\u9e64\u58c1","\u65b0\u4e61","\u7126\u4f5c","\u6fee\u9633","\u8bb8\u660c","\u6f2f\u6cb3","\u4e09\u95e8\u5ce1","\u5357\u9633","\u5546\u4e18","\u4fe1\u9633","\u5468\u53e3","\u9a7b\u9a6c\u5e97","\u6d4e\u6e90"]},{"pro":"\u6e56\u5317","cities":["\u6b66\u6c49","\u5b9c\u660c","\u8346\u5dde","\u8944\u6a0a","\u9ec4\u77f3","\u8346\u95e8","\u9ec4\u5188","\u5341\u5830","\u6069\u65bd","\u6f5c\u6c5f","\u5929\u95e8","\u4ed9\u6843","\u968f\u5dde","\u54b8\u5b81","\u5b5d\u611f","\u9102\u5dde","\u795e\u519c\u67b6"]},{"pro":"\u6e56\u5357","cities":["\u957f\u6c99","\u5e38\u5fb7","\u682a\u6d32","\u6e58\u6f6d","\u8861\u9633","\u5cb3\u9633","\u90b5\u9633","\u76ca\u9633","\u5a04\u5e95","\u6000\u5316","\u90f4\u5dde","\u6c38\u5dde","\u6e58\u897f","\u5f20\u5bb6\u754c"]},{"pro":"\u5e7f\u4e1c","cities":["\u5e7f\u5dde","\u6df1\u5733","\u73e0\u6d77","\u6c55\u5934","\u4e1c\u839e","\u4e2d\u5c71","\u4f5b\u5c71","\u97f6\u5173","\u6c5f\u95e8","\u6e5b\u6c5f","\u8302\u540d","\u8087\u5e86","\u60e0\u5dde","\u6885\u5dde","\u6c55\u5c3e","\u6cb3\u6e90","\u9633\u6c5f","\u6e05\u8fdc","\u6f6e\u5dde","\u63ed\u9633","\u4e91\u6d6e"]},{"pro":"\u5e7f\u897f","cities":{"0":"\u5357\u5b81","1":"\u67f3\u5dde","2":"\u6842\u6797","3":"\u68a7\u5dde","4":"\u5317\u6d77","5":"\u9632\u57ce\u6e2f","6":"\u94a6\u5dde","7":"\u8d35\u6e2f","8":"\u7389\u6797","11":"\u8d3a\u5dde","12":"\u767e\u8272","13":"\u6cb3\u6c60","14":"\u6765\u5bbe","15":"\u5d07\u5de6"}},{"pro":"\u6d77\u5357","cities":["\u6d77\u53e3","\u4e09\u4e9a","\u4e09\u6c99","\u4e94\u6307\u5c71","\u743c\u6d77","\u510b\u5dde","\u6587\u660c","\u4e07\u5b81","\u4e1c\u65b9","\u5b9a\u5b89","\u5c6f\u660c","\u6f84\u8fc8","\u4e34\u9ad8","\u767d\u6c99","\u660c\u6c5f","\u4e50\u4e1c","\u9675\u6c34","\u4fdd\u4ead","\u743c\u4e2d"]},{"pro":"\u56db\u5ddd","cities":["\u6210\u90fd","\u7ef5\u9633","\u5fb7\u9633","\u81ea\u8d21","\u6500\u679d\u82b1","\u5e7f\u5143","\u5185\u6c5f","\u4e50\u5c71","\u5357\u5145","\u5b9c\u5bbe","\u5e7f\u5b89","\u8fbe\u5dde","\u96c5\u5b89","\u7709\u5c71","\u7518\u5b5c","\u51c9\u5c71","\u6cf8\u5dde","\u963f\u575d\u5dde","\u9042\u5b81\u5e02","\u5df4\u4e2d\u5e02","\u8d44\u9633\u5e02"]},{"pro":"\u8d35\u5dde","cities":["\u8d35\u9633","\u516d\u76d8\u6c34","\u9075\u4e49","\u5b89\u987a","\u94dc\u4ec1","\u9ed4\u897f\u5357","\u6bd5\u8282","\u9ed4\u4e1c\u5357","\u9ed4\u5357"]},{"pro":"\u4e91\u5357","cities":["\u6606\u660e","\u5927\u7406","\u66f2\u9756","\u7389\u6eaa","\u662d\u901a","\u695a\u96c4","\u7ea2\u6cb3","\u6587\u5c71","\u666e\u6d31","\u897f\u53cc\u7248\u7eb3","\u4fdd\u5c71","\u5fb7\u5b8f","\u4e3d\u6c5f","\u6012\u6c5f","\u8fea\u5e86","\u4e34\u6ca7"]},{"pro":"\u897f\u85cf","cities":["\u62c9\u8428","\u65e5\u5580\u5219","\u5c71\u5357","\u6797\u829d","\u660c\u90fd","\u963f\u91cc","\u90a3\u66f2"]},{"pro":"\u9655\u897f","cities":["\u897f\u5b89","\u5b9d\u9e21","\u54b8\u9633","\u94dc\u5ddd","\u6e2d\u5357","\u5ef6\u5b89","\u6986\u6797","\u6c49\u4e2d","\u5b89\u5eb7","\u5546\u6d1b"]},{"pro":"\u7518\u8083","cities":["\u5170\u5dde","\u5609\u5cea\u5173","\u91d1\u660c","\u767d\u94f6","\u5929\u6c34","\u9152\u6cc9","\u5f20\u6396","\u6b66\u5a01","\u5b9a\u897f","\u9647\u5357","\u5e73\u51c9","\u5e86\u9633","\u4e34\u590f","\u7518\u5357"]},{"pro":"\u5b81\u590f","cities":["\u94f6\u5ddd","\u77f3\u5634\u5c71","\u5434\u5fe0","\u56fa\u539f","\u4e2d\u536b"]},{"pro":"\u9752\u6d77","cities":["\u897f\u5b81","\u6d77\u4e1c","\u6d77\u5357","\u6d77\u5317","\u9ec4\u5357","\u7389\u6811","\u679c\u6d1b","\u6d77\u897f"]},{"pro":"\u65b0\u7586","cities":["\u4e4c\u9c81\u6728\u9f50","\u77f3\u6cb3\u5b50","\u514b\u62c9\u739b\u4f9d","\u4f0a\u7281","\u5df4\u97f3\u90ed\u695e","\u660c\u5409","\u514b\u5b5c\u52d2\u82cf\u67ef\u5c14\u514b\u5b5c","\u535a\u5c14\u5854\u62c9","\u5410\u9c81\u756a","\u54c8\u5bc6","\u5580\u4ec0","\u548c\u7530","\u963f\u514b\u82cf","\u5854\u57ce","\u963f\u52d2\u6cf0","\u963f\u62c9\u5c14","\u56fe\u6728\u8212\u514b","\u4e94\u5bb6\u6e20","\u5317\u5c6f","\u94c1\u95e8\u5173"]},{"pro":"\u9999\u6e2f","cities":["\u9999\u6e2f\u7279\u522b\u884c\u653f\u533a"]},{"pro":"\u6fb3\u95e8","cities":["\u6fb3\u95e8\u7279\u522b\u884c\u653f\u533a"]},{"pro":"\u53f0\u6e7e","cities":["\u53f0\u5317","\u9ad8\u96c4","\u53f0\u4e2d","\u53f0\u5357","\u5c4f\u4e1c","\u5357\u6295","\u4e91\u6797","\u65b0\u7af9","\u5f70\u5316","\u82d7\u6817","\u5609\u4e49","\u82b1\u83b2","\u6843\u56ed","\u5b9c\u5170","\u57fa\u9686","\u53f0\u4e1c","\u91d1\u95e8","\u9a6c\u7956","\u6f8e\u6e56"]}];
})(window);
运行效果图：
准备数据
这里数据库我使用的是mysql，先看下表格：
provience表
city表
这里使用provience表的主键作为city表的外键，等下依据省份的id查找相应的市区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</head>
<body>
<select id="province">
<option>----请选择省份----</option>
<option>北京</option>
<option>上海</option>
<option>江苏</option>
</select>
<select class="city">
<option>----请选择城市----</option>
</select>
<select class="city">
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
</select>
<select class="city">
<option>黄浦</option>
<option>卢湾</option>
<option>徐汇</option>
<option>长宁</option>
<option>静安</option>
</select>
<select class="city">
<option>南京</option>
<option>镇江</option>
<option>苏州</option>
<option>南通</option>
<option>扬州</option>
</select>
</body>
</html>
插件文件名为：provinceCity.js，源码：
查询方法的封装
接下来就是实现查询全部省市以及依据省份id查找相应的城市的方法，这里我写了一个BaseDao封装了一些主要的数据库链接以及关闭连接的方法：
BaseDao.java
package com.jqueryajax.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class BaseDao {
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/ajax?useUnicode=true&characterEncoding=UTF-8";
private static final String USERNAME = "root";
private static final String PASSWORD = "root";
private Connection conn;
private PreparedStatement psmt;
public ResultSet rs;
/**
* 获取连接 alt+shift+z:捕获异常
*/
public void getConn() {
try {
Class.forName(DRIVER);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 释放资源
*/
public void closeAll() {
try {
if (rs != null)
rs.close();
if (psmt != null)
psmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 运行查询的方法
*
* @param sql
* :运行的SQL语句
* @param parmms
* :占位符的值
* @return 封装数据的结果集 String
*
*/
public ResultSet execQuery(String sql, String[] params) {
getConn();
try {
psmt = conn.prepareStatement(sql);// 创建PreparedStatement对象。运行增,删,改,查
if (params != null && params.length > 0) {
for (int i = 0; i < params.length; i++) {
psmt.setString(i + 1, params[i]);// psmt.setString(1,"aa");
}
}
rs = psmt.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
return rs;
}
}
ProvinceDaoImpl继承自BaseDao，在该类中封装了getAllProvince和getCitiesByProvinceId这两个方法。顾名思义，就是查询全部省市和更具省份id查找城市。
package com.jqueryajax.dao.impl;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.jqueryajax.dao.BaseDao;
import com.jqueryajax.entity.City;
import com.jqueryajax.entity.Province;
public class ProvinceDaoImpl extends BaseDao{
public List<Province> getAllProvince() {
List<Province> list = new ArrayList<Province>();
String sql="select * from province";
rs = this.execQuery(sql, null);
try {
while(rs.next()){
Province province = new Province();
province.setProvinceId(rs.getInt("provinceId"));
province.setProvinceName(rs.getString("provinceName"));
list.add(province);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
this.closeAll();
}
return list;
}
public List<City> getCitiesByProvinceId(int provinceId) {
List<City> list = new ArrayList<City>();
String sql="select * from city where provinceId="+provinceId;
rs = this.execQuery(sql, null);
try {
while(rs.next()){
City city = new City();
city.setCityId(rs.getInt("cityId"));
city.setCityName(rs.getString("cityName"));
city.setPersonSize(rs.getInt("personSize"));
city.setCityArea(rs.getInt("cityArea"));
city.setPlace(rs.getString("place"));
city.setProvinceId(rs.getInt("provinceId"));
list.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
this.closeAll();
}
return list;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
(function($){
/**
* 省市联动
* @param {Array} areaData 地区数组 格式：[{pro: '北京', cities: {-1: 北京, 0: 东城区, ...}},{...}]
* @param {Object} options 一些配置选项
* @returns {Object} jQuery对象
*/
$.fn.citySelect = function(areaData, options){
if(!$.isArray(areaData)) return;
var opts = $.extend({
provinceID: -1,
cityID: -1,
isShowDefaultVal: true,
isDealComArea: false
}, options);
var $province = $(this).find('select').eq(0);
var $city = $(this).find('select').eq(1);
//-1是直辖市信息
var provicneID = opts.provinceID;
var cityID = opts.cityID;
var isShowDefaultVal = opts.isShowDefaultVal;
var isDealComArea = opts.isDealComArea;
var defaultData = ['请选择', '-2'];
var tmpArr = [];
//增加下拉项到临时数组
var addOpt = function(val,text,defVal){
tmpArr.push("<option value='"+val+"' "+(parseInt(defVal,10)==parseInt(val,10)+''?"selected":"")+">"+text+"</option>");
};
//省份变更联动城市下拉
var changeHandler = function(){
var provinceID = $province.val();
tmpArr = [];
//非省【请选择】情况下，不显示地市【请选择】
provinceID == -2 && isShowDefaultVal && addOpt(defaultData[1],defaultData[0]);
if(provinceID != -2) {
$.each(areaData[provinceID]['cities'], function(cid, city) {
//是否只显示直辖市
if(isDealComArea && provinceID < 4) {
addOpt(cityID, areaData[provinceID]['pro'], cityID);
return false;
}else {
cid != -1 && addOpt(cid, city， cityID);
}
});
}
$city.html(tmpArr.join(''));
};
//初始化省份
var initProvince = function() {
tmpArr = [];
//默认省级下拉
isShowDefaultVal && addOpt(defaultData[1],defaultData[0]);
$.each(areaData, function(pid,details){
addOpt(pid,details.pro,provicneID);
});
$province.html(tmpArr.join(''));
};
//初始化事件
var init = function() {
initProvince();
//省级联动 控制
$province.on('change', changeHandler);
changeHandler();
}
init();
return this;
};
}(jQuery));
具体代码如下
创建Servlet处理用户请求
接下来实现两个Servlet：ProvinceJsonServlet和CityJsonServlet用来处理用户的请求：
ProvinceJsonServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");//设置响应的内容格式
PrintWriter out = response.getWriter();
ProvinceDaoImpl provinceDao = new ProvinceDaoImpl();
List<Province> list = provinceDao.getAllProvince();//查询全部的省份
//[{"provinceId":1,"provinceName":"陕西省"},...]
JSONArray jsonArray = JSONArray.fromObject(list);
System.out.print(jsonArray);
out.print(jsonArray);
}
这里就是一个查询全部的省份。然后将其转换成json对象。然后将该json对象返回给client，这里须要用到以下一些jar文件：
commons-beanutils.jar
commons-collections.jar
commons-lang.jar
commons-logging.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk15.jar
CityJsonServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");//设置响应的内容格式
PrintWriter out = response.getWriter();
ProvinceDaoImpl provinceDao = new ProvinceDaoImpl();
//依据省份ID查询旗下的城市
String provinceIdStr = request.getParameter("provinceId");
int provinceId = Integer.parseInt(provinceIdStr);
List<City> list = provinceDao.getCitiesByProvinceId(provinceId);
JSONArray jsonArray = JSONArray.fromObject(list);
out.print(jsonArray);
}
在CityServlet中依据client通过jQuery
ajax传递过来的省份id，(这里如果client传递的參数名称是”provinceId”),查询旗下的城市，然后转换成json对象，返回给client。
注意：一定记得在web.xml中配置这两个servlet
您可能感兴趣的文章:
- 几种二级联动案例（jQuery\Array\Ajax
php） - jQuery+JSON实现AJAX二级联动实例分析
- jquery+json实现数据二级联动的方法
- jQuery+PHP+MySQL二级联动下拉菜单实例讲解
- jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
- jQuery 下拉列表
二级联动插件分享 - jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- 基于jquery的二级联动菜单实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入jquery -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- 引入插件 -->
<script src="jquery.area.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#area').GangedArea({
level: 2, // 显示级别, 最大是3, 最小是1
url: "area.json",// area对应的路径
provinceValue: "",// 默认指定省份id, 一般编辑的时候使用
cityValue: "", //指定默认城市id, 一般编辑的时候使用
districtValue: '', // 默认区id, 一般编辑的时候使用
className: '', // 附加样式
provinceName: 'province', // 省份name值
cityName: 'city',//市name值
districtName: 'district',// 区name值
tip: '===请选择==='// 默认提示
});
})
</script>
</head>
<body>
<div id="area"></div>
</body>
</html>
前端页面
如今万事俱备仅仅欠东风，開始编写我们的前端页面，这里就不使用css美化页面了，我们今天的主要任务是使用jQuery
ajax请求，并在回调函数中处理该请求。
在jsp页面内容例如以下：
<body>
<div id="province"></div>
<div id="city"></div>
</body>
这里我使用了两个div来显示省份和城市。
首先我们须要在页面载入完成之前就要载入全部的省份，所以须要使用到页面载入函数：
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("ProvinceJsonServlet", null,
function(data){
alert("Data Loaded: " + data);
});
});
</script>
记得引入jQuery文件哈。这里我在页面载入函数中查询全部的省份，请求ProvinceJsonServlet，由于不须要传递不论什么參数。全部參数填写null，在回调函数中的data就是server返回给前端的数据。
我们先将该data打印出来看下是否正确.
能够看到在页面载入之前已经正确的载入了全部的省份。
接下来就是依据这些数据构造一个select选择器。完整的回调函数，例如以下：
function(data){
//alert("Data Loaded: " + data);
var optionHTML="<select name=\"province\" onchange=\"loadCities(this.value)\">";
var data = eval("("+data+")");
for(var i=0;i<data.length;i++){
var province = data[i];
//alert(province.provinceId);
optionHTML+="<option value=\""+province.provinceId+"\">"+province.provinceName+"</option>";
}
optionHTML+="</select>";
$("#province").html(optionHTML);//将数据填充到省份的下拉列表中
});
这里须要注意一定要使用eval(“(“+data+”)”);函数。这是由于server返回给我们的是json格式的字符串，我们须要使用eval()函数将其转换成json数组。而且为该select设置了onchange方法，在改方法中传递的參数就是当前选中的省份的id。
function loadCities(cityId) {
$.post("CityJsonServlet", {provinceId:cityId},
loadCityCallback
);
}
function loadCityCallback(data) {
alert(data);
}
在loadCities方法中使用jquery的post方法请求CityJsonServlet，而且传递了一个provinceId作为參数。而且设置自己定义的回调函数loadCityCallback，在该回调函数中首先通过alert查看数据是否正确.
当选择不同的省份，弹出的数据也是不同的，说明server返回给我们的json字符串是正确的。
接下来和省份一样。依据json字符串构造页面：
function loadCityCallback(data) {
//alert(data);
var data = eval("("+data+")");
var cityHTML="";
for(var i=0;i<data.length;i++){
var city = data[i];
cityHTML+="<p><b>"+city.cityName+"</b></p>";
cityHTML+="人口:"+city.personSize+",面积:"+city.cityArea+"<br>";
cityHTML+="名胜:"+city.place+"<br>";
}
$("#city").html(cityHTML);
}
效果例如以下：
源代码下载
可根据需要稍作调整
希望本文所述对大家JavaScript程序设计有所帮助。
例子基本结构如下：
您可能感兴趣的文章:
- Jquery实现仿京东商城省市联动菜单
- 基于jquery实现省市联动效果
- DIV+CSS+jQ实现省市联动可扩展
<!DOCTYPE html>
<html>
<head>
<title>省市联动</title>
<meta charset="utf-8">
</head>
<body>
<div class="area">
<select name="province"></select>
<select name="city"></select>
</div>
<script src="areaData.js"></script>
<script src="provinceCity.js"></script>
</body>
</html>
使用方法：
第一种：初始化省市选择
$('.area').citySelect(areaData);
效果：
第二种：默认不显示【请选择】
$('.area').citySelect(areaData, {
isShowDefaultVal: false
});
效果：
第三种：有初始省市
$('.area').citySelect(areaData, {
provinceID: 10,
cityID: 3,
isShowDefaultVal: false
});
效果：
第四种：属于业务的特殊需求，当为直辖市的时候，只显示直辖市，不显示分区（这个需求比较特殊）
$('.area').citySelect(areaData, {
provinceID: 0,
cityID: -1,
isDealComArea: true,
isShowDefaultVal: false
});
效果：
以上就是基于jquery实现省市联动效果的代码，在这里做一下记录，欢迎大家提建议，共同进步。
您可能感兴趣的文章:
- Jquery实现仿京东商城省市联动菜单
- 基于jquery实现省市联动特效
- DIV+CSS+jQ实现省市联动可扩展