依靠jquery完结省市联合浮动特效

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个。
首先需要保存地区数据的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表
图片 1
city表
图片 2
这里使用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,源码:

图片 3

查询方法的封装

接下来就是实现查询全部省市以及依据省份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打印出来看下是否正确.

图片 4
能够看到在页面载入之前已经正确的载入了全部的省份。

接下来就是依据这些数据构造一个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字符串是正确的。
图片 5
图片 6
接下来和省份一样。依据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);
}

效果例如以下:
图片 7

源代码下载

可根据需要稍作调整

希望本文所述对大家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);

效果:

 图片 8

第二种:默认不显示【请选择】

$('.area').citySelect(areaData, {
 isShowDefaultVal: false
 });

效果:

 图片 9

第三种:有初始省市

$('.area').citySelect(areaData, {
 provinceID: 10,
 cityID: 3,
 isShowDefaultVal: false
 });

效果:

 图片 10

第四种:属于业务的特殊需求,当为直辖市的时候,只显示直辖市,不显示分区(这个需求比较特殊)

$('.area').citySelect(areaData, {
 provinceID: 0,
 cityID: -1,
 isDealComArea: true,
 isShowDefaultVal: false
 });

效果:

图片 11

以上就是基于jquery实现省市联动效果的代码,在这里做一下记录,欢迎大家提建议,共同进步。

您可能感兴趣的文章:

  • Jquery实现仿京东商城省市联动菜单
  • 基于jquery实现省市联动特效
  • DIV+CSS+jQ实现省市联动可扩展

相关文章