精华内容
下载资源
问答
  • java 省市区三级联动

    2016-08-16 15:49:09
    省市区三级联动,兼容各大浏览器
  • 省市区三级联动Java

    2018-09-11 16:03:19
    spcc.js文件有一个地方需要修改一下 在第30行有一个citySele需要修改为seleValue 全文也就一个citySele
  • JAVA 分页效果实现 整体架构为 后端代码 dao层 的接口 省份 的dao的接口 package src.cn.hp.dao; import src.cn.hp.model.Provice; import java.util.List; public interface ProviceInfoDao { /** * 查询所有的...

    JAVA 分页效果实现
    整体架构为
    在这里插入图片描述

    后端代码
    dao层 的接口
    省份 的dao的接口

    package src.cn.hp.dao;
    import src.cn.hp.model.Provice;
    import java.util.List;
    public interface ProviceInfoDao {
        /**
         * 查询所有的省份信息
         * @return  省份数据
         */
        public List<Provice> findAll();
    }
    
    

    市 的dao的接口

    package src.cn.hp.dao;
    import src.cn.hp.model.City;
    import java.util.List;
    public interface CityInfoDao {
    
        /**
         * 根据省份查询所属的市
         * @param pid 省份的id
         * @return  省份所属的市
         */
        public List<City> findAllCity(int pid);
    }
    
    

    区 的dao的接口

    package src.cn.hp.dao;
    import src.cn.hp.model.Street;
    import java.util.List;
    public interface StreetInfoDao {
        /**
         * 查询 所有区 信息
         * @param cid  根据市 的id 查
         * @return 区 信息
         */
        public List<Street> findAll(int cid);
    }
    
    

    impl层 dao的实现类
    省份 dao的实现类 imol

    package src.cn.hp.dao.impl;
    import src.cn.hp.dao.ProviceInfoDao;
    import src.cn.hp.model.Provice;
    import src.cn.hp.util.ConnDemo;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    public class ProviceInfoDaoImol implements ProviceInfoDao {
        @Override
        public List<Provice> findAll() {
            Connection conn = ConnDemo.getConn();
            List<Provice> list = new ArrayList<Provice>();
            String sql = "select * from provice";
            try {
                PreparedStatement ps = conn.prepareStatement(sql);
                ResultSet rs = ps.executeQuery();
                while (rs.next()) {
                    Provice p = new Provice();
                    p.setPid(rs.getInt(1));
                    p.setPname(rs.getString(2));
                    list.add(p);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
            return list;
        }
    }
    
    

    市 dao的实现类 imol

    package src.cn.hp.dao.impl;
    import src.cn.hp.dao.CityInfoDao;
    import src.cn.hp.model.City;
    import src.cn.hp.model.Provice;
    import src.cn.hp.util.ConnDemo;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    public class CityInfoDaoImpl implements CityInfoDao {
        @Override
        public List<City> findAllCity(int pid) {
            Connection conn = ConnDemo.getConn();
            List<City> list = new ArrayList<City>();
            String sql = "select * from city where pid=?";
            try {
                PreparedStatement ps = conn.prepareStatement(sql);
                ps.setInt(1,pid);
                ResultSet rs = ps.executeQuery();
                while (rs.next()) {
                    City p = new City();
                    p.setCid(rs.getInt(1));
                    p.setCname(rs.getString(2));
                    p.setPid(rs.getInt(3));
                    list.add(p);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
            return list;
        }
    }
    
    
    

    区 县 dao的实现类 imol

    package src.cn.hp.dao.impl;
    import src.cn.hp.dao.StreetInfoDao;
    import src.cn.hp.model.City;
    import src.cn.hp.model.Street;
    import src.cn.hp.util.ConnDemo;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    public class StreetInfoDaoImpl implements StreetInfoDao {
        @Override
        public List<Street> findAll(int cid) {
            Connection conn = ConnDemo.getConn();
            List<Street> list = new ArrayList<Street>();
            String sql = "select * from street where cid=?";
            try {
                PreparedStatement ps = conn.prepareStatement(sql);
                ps.setInt(1, cid);
                ResultSet rs = ps.executeQuery();
                while (rs.next()) {
                    Street p = new Street();
                    p.setCid(rs.getInt(1));
                    p.setSname(rs.getString(2));
                    p.setCid(rs.getInt(3));
                    list.add(p);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
            return list;
        }
    }
    
    
    

    model层 实体类
    省 model

    package src.cn.hp.model;
    public class Provice {
        private  int pid;
        private String pname;
    
        public Provice(int pid, String pname) {
            this.pid = pid;
            this.pname = pname;
        }
    
        public Provice() {
        }
    
        public int getPid() {
            return pid;
        }
    
        public Provice(String pname) {
            this.pname = pname;
        }
    
        public void setPid(int pid) {
            this.pid = pid;
        }
    
        public String getPname() {
            return pname;
        }
    
        public void setPname(String pname) {
            this.pname = pname;
        }
    }
    
    

    市 model

    package src.cn.hp.model;
    public class City {
        private int cid;
        private  String cname;
        private int pid;
    
        public City(int cid, String cname, int pid) {
            this.cid = cid;
            this.cname = cname;
            this.pid = pid;
        }
    
        public City() {
        }
    
        public City(String cname, int pid) {
            this.cname = cname;
            this.pid = pid;
        }
    
        public int getCid() {
            return cid;
        }
    
        public void setCid(int cid) {
            this.cid = cid;
        }
    
        public String getCname() {
            return cname;
        }
    
        public void setCname(String cname) {
            this.cname = cname;
        }
    
        public int getPid() {
            return pid;
        }
    
        public void setPid(int pid) {
            this.pid = pid;
        }
    }
    
    

    区 model

    package src.cn.hp.model;
    
    public class Street {
    
        private int sid;
        private  String sname;
        private int cid;
    
        public Street(int sid, String sname, int cid) {
            this.sid = sid;
            this.sname = sname;
            this.cid = cid;
        }
    
        public int getSid() {
            return sid;
        }
    
        public void setSid(int sid) {
            this.sid = sid;
        }
    
        public Street(int cid) {
            this.cid = cid;
        }
    
        public Street(String sname, int cid) {
            this.sname = sname;
            this.cid = cid;
        }
    
        public String getSname() {
            return sname;
        }
    
        public void setSname(String sname) {
            this.sname = sname;
        }
    
        public int getCid() {
            return cid;
        }
    
        public void setCid(int cid) {
            this.cid = cid;
        }
    
        public Street() {
        }
    }
    
    

    servlet层
    省 servlet

    package src.cn.hp.servlet;
    import com.alibaba.fastjson.JSONObject;
    import src.cn.hp.dao.ProviceInfoDao;
    import src.cn.hp.dao.impl.ProviceInfoDaoImol;
    import src.cn.hp.model.Provice;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/findprovice")
    public class FindProviceServlet extends HttpServlet {
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            ProviceInfoDao pid = new ProviceInfoDaoImol();
            List<Provice> plist = pid.findAll();
    //        把这个省份的集合转换成json 格式的数据发送到前端页面
            resp.getWriter().write(JSONObject.toJSONString(plist));
        }
    }
    

    市 servlet

    package src.cn.hp.servlet;
    import com.alibaba.fastjson.JSONObject;
    import src.cn.hp.dao.CityInfoDao;
    import src.cn.hp.dao.ProviceInfoDao;
    import src.cn.hp.dao.impl.CityInfoDaoImpl;
    import src.cn.hp.dao.impl.ProviceInfoDaoImol;
    import src.cn.hp.model.City;
    import src.cn.hp.model.Provice;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/findcitybypid")
    public class FindCityByPidServlet extends HttpServlet {
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            String id=req.getParameter("id");
            CityInfoDao pid = new CityInfoDaoImpl();
            List<City> list = pid.findAllCity(Integer.parseInt(id));
    //        把这个城市的集合转换成json 格式的数据发送到前端页面
            resp.getWriter().write(JSONObject.toJSONString(list));
        }
    }
    
     
    

    区 servlet

    package src.cn.hp.servlet;
    import com.alibaba.fastjson.JSONObject;
    import src.cn.hp.dao.CityInfoDao;
    import src.cn.hp.dao.StreetInfoDao;
    import src.cn.hp.dao.impl.CityInfoDaoImpl;
    import src.cn.hp.dao.impl.StreetInfoDaoImpl;
    import src.cn.hp.model.City;
    import src.cn.hp.model.Street;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/findstreetbypid")
    public class FindStreetByPidServlet extends HttpServlet {
    
    
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            String id=req.getParameter("id");
            StreetInfoDao pid = new StreetInfoDaoImpl();
            List<Street> list = pid.findAll(Integer.parseInt(id));
    //        把这个城市的集合转换成json 格式的数据发送到前端页面
            resp.getWriter().write(JSONObject.toJSONString(list));
            
        }
    }
    
    

    util 层 工具类

    package src.cn.hp.util;
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.SQLException;
    public class ConnDemo {
    	private static String Driver = "com.mysql.jdbc.Driver";
    	private static String Url = "jdbc:mysql://localhost:3306/provices?characterEncoding=utf8";
    	private static String user = "root";
    	private static String pwd = "123456";
    	public static Connection conn;
    
    	// 创建数据库连接
    	public static Connection getConn() {
    		try {
    			Class.forName(Driver);
    			conn = DriverManager.getConnection(Url, user, pwd);
    		} catch (Exception e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return conn;
    	}
    
    	// 关闭数据库连接
    	public static void getClose() {
    		try {
    			if (conn != null) {
    				conn.close();
    			}
    		} catch (SQLException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	}
    
    	// 测试数据库连接
    	public static void main(String[] args) {
    		System.out.println(getConn());
    		if (getConn()!=null) {
    			System.out.println("连接成功");		}
    	}
    }
    
    

    前端代码
    index.jsp 首页

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
     //首页没有写 三级联动页面 通过地址栏进行访问
      </body>
    </html>
    

    NewFile.jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
        <script>
            $(function () {
                $.ajax({
                    type: "get",
                    url: "findprovice",
                    dataType: "json",
                    success: function (data) {//data的值就是从后端发送的json格式的字符串
                        // 获取省的对象
                        var obj = $("#provice");
                        for (let i = 0; i < data.length; i++) {
                            var ob = "<option value='" + data[i].pid + "'>" + data[i].pname + "</option>"
                            obj.append(ob);
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    
    <select name="provice" id="provice">
        <option value="0">请选择</option>
    </select><select name="city" id="city">
        <option value="0">请选择</option>
    </select><select name="street" id="street">
        <option value="0">请选择</option>
    </select></body>
    <script>
        $("#provice").change(function () {
            $("#city option").remove();
            $.ajax({
                type: "get",
                url: "findcitybypid?id=" + $("#provice").val(),
                dataType: "json",
                success: function (data) {
                    // 获取市的对象
                    var obj = $("#city");
                    for (let i = 0; i < data.length; i++) {
                        var ob = "<option value='" + data[i].cid + "'>" + data[i].cname + "</option>"
                        obj.append(ob);
                    }
                }
            });
        });
    </script>
    
    <script>
        $("#city").change(function () {
            $("#street option").remove();
            $.ajax({
                type: "get",
                url: "findstreetbypid?id=" + $("#city").val(),
                dataType: "json",
                success: function (data) {
                    // 获取市的对象
                    var obj = $("#street");
                    for (let i = 0; i < data.length; i++) {
                        var ob = "<option value='" + data[i].sid + "'>" + data[i].sname + "</option>"
                        obj.append(ob);
                    }
                }
            });
        });
    </script>
    
    </html>
    
    MYSQL
    ```java
    CREATE database provices CHARACTER  set utf8;
    
    USE provices; 
    
    CREATE table  provice (
    pid INT PRIMARY KEY  auto_increment,
    pname varchar(20)
    
    );
    
    INSERT into provice VALUES (null,"河南省");
    INSERT into provice VALUES (null,"山东省");
    INSERT into provice VALUES (null,"河北省");
    
    CREATE table  city (
    cid INT PRIMARY KEY  auto_increment,
    cname varchar(20),
    pid int
    );
    
    -- 河南省
    INSERT into city VALUES (null,"郑州市",1);
    INSERT into city VALUES (null,"开封市",1);
    INSERT into city VALUES (null,"洛阳市",1);
    
    -- 山东
    INSERT into city VALUES (null,"济南市",2);
    INSERT into city VALUES (null,"青岛市",2);
    INSERT into city VALUES (null,"淄博市",2);
    
    -- 河北
    INSERT into city VALUES (null,"石家庄市",3);
    INSERT into city VALUES (null,"唐山市",3);
    INSERT into city VALUES (null,"秦皇岛市",3);
    
    
    CREATE table  street (
    sid INT PRIMARY KEY  auto_increment,
    sname varchar(20),
    cid int
    );
    -- 郑州市
    INSERT into street VALUES (null,"中原区",1);
    INSERT into street VALUES (null,"二七区",1);
    INSERT into street VALUES (null,"管城回族区",1);
    
    -- 开封市
    INSERT into street VALUES (null,"龙亭区",2);
    INSERT into street VALUES (null,"顺河回族区",2);
    INSERT into street VALUES (null,"鼓楼区",2);
    
    -- 洛阳市
    INSERT into street VALUES (null,"汝阳",3);
    INSERT into street VALUES (null,"宜阳",3);
    INSERT into street VALUES (null,"洛宁",3);
    
    -- 济南市
    INSERT into street VALUES (null,"商河县",4);
    INSERT into street VALUES (null,"济阳县",4);
    INSERT into street VALUES (null,"平阴县",4);
    -- 青岛市
    INSERT into street VALUES (null,"七区五市",5);
    INSERT into street VALUES (null,"市南区",5);
    INSERT into street VALUES (null,"市北区",5);
    -- 淄博市 
    INSERT into street VALUES (null,"博山",6);
    INSERT into street VALUES (null,"周村",6);
    INSERT into street VALUES (null,"临淄",6);
    
    -- 石家庄市
    INSERT into street VALUES (null,"正定县",7);
    INSERT into street VALUES (null,"行唐县",7);
    INSERT into street VALUES (null,"灵寿县",7);
    
    -- 唐山市
    INSERT into street VALUES (null,"乐亭县",8);
    INSERT into street VALUES (null,"迁西县",8);
    INSERT into street VALUES (null,"玉田县",8);
    
    -- 秦皇岛市
    INSERT into street VALUES (null,"青龙满族自治县",9);
    INSERT into street VALUES (null,"昌黎县",9);
    INSERT into street VALUES (null,"卢龙县",9);
    
    

    效果图

    三级联动

    展开全文
  • JS来实现三级联动,把文件解压后,运行index.html看效果即可,geo_copy.js可不用看,一个小修改后的副本而已
  • 支持世界主要国家地区的三级联动并且包含国内各省市区的三级联动,并具备下拉框隐藏及显示功能
  • 1. 数据库建表语句: create table Province( pid int(11) not null primary key, pname varchar(100) ) create table city( cid int(11) not null ... html页面 三级联动实例 省: 请选择 市: 请选择 县: 请选择

    1.       数据库建表语句:

    create table Province(

    pid int(11) not null primary key,

    pname varchar(100)

    )

    create table city(

    cid int(11) not null primary key,

    cname varchar(100),

    pid int(11)

    )

    create table district(

    did int(11) not null primary key,

    dname varchar(100),

    cid int(11)

    )

    2.       建立VO 实现类:

    3.       建立数据库驱动连接:

    //MySQL数据库连接驱动

    public class SjLDriver {

    private final String DRIVER="com.mysql.jdbc.Driver";

    private final String URL="jdbc:mysql://localhost:3306/test";

    private final String USER="root";

    private final String PWD="guoliang";

    private Connection conn;

    public SjLDriver(){

    try {

    Class.forName(DRIVER);

    conn = DriverManager.getConnection(URL, USER, PWD);

    } catch (ClassNotFoundException e) {

    // TODO Auto-generated catch block

    e.printStackTrace();

    } catch (SQLException e) {

    // TODO Auto-generated catch block

    e.printStackTrace();

    }

    }

    public Connection getConnection(){

    return this.conn;

    }

    }

    4.       建立DAO 接口:

    public interface SjLDAO {

    public List getPro()throws SQLException;                  //省份

    public List getCity(int pid)throws SQLException;              //城市

    public List getDistrictVO(int cid)throws SQLException;    //地区

    }

    5.  建立DAOImpl接口实现类:

    public class SjLDAOImpl implements SjLDAO {

    private Connection conn;

    private PreparedStatement ppt;

    private ResultSet res;

    public List getCity(int pid) throws SQLException {

    // TODO 城市

    SjLDriver sb = new SjLDriver();

    conn=sb.getConnection();

    List list = new ArrayList();

    String sql="select cid ,cname,pid from city where pid=?";

    ppt=conn.prepareStatement(sql);

    ppt.setInt(1,pid);

    res=ppt.executeQuery();

    while(res.next()){

    CityVO cb = new CityVO();

    cb.setCid(res.getInt("cid"));

    cb.setCname(res.getString("cname"));

    cb.setPid(res.getInt("pid"));

    list.add(cb);

    }

    return list;

    }

    public List getDistrictVO(int cid) throws SQLException {

    // TODO 区域

    SjLDriver sb = new SjLDriver();

    conn=sb.getConnection();

    List list = new ArrayList();

    String sql ="select did,dname,cid from district where cid=?";

    ppt=conn.prepareStatement(sql);

    ppt.setInt(1,cid);

    res=ppt.executeQuery();

    while(res.next()){

    DistrictVO pp = new DistrictVO();

    pp.setDid(res.getInt("did"));

    pp.setDname(res.getString("dname"));

    pp.setCid(res.getInt("cid"));

    list.add(pp);

    }

    return list;

    }

    public List getPro() throws SQLException {

    // TODO 省份

    SjLDriver sb = new SjLDriver();

    conn=sb.getConnection();

    List list = new ArrayList();

    String sql="select * from province";

    ppt=conn.prepareStatement(sql);

    res=ppt.executeQuery();

    while(res.next()){

    ProvinceVO pp = new ProvinceVO();

    pp.setPid(res.getInt("pid"));

    pp.setPname(res.getString("pname"));

    list.add(pp);

    }

    return list;

    }

    }

    6.       创建工厂

    public class SjLDFactory {

    public static SjLDAO getDisplay(){

    return new SjLDAOImpl();

    }

    }

    9. 创建servlet实现Http

    public void doGet(HttpServletRequest request, HttpServletResponse response)

    throws ServletException, IOException {

    this.doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

    throws ServletException, IOException {

    request.setCharacterEncoding("UTF-8");

    response.setCharacterEncoding("UTF-8");

    String action= request.getParameter("action");

    if("pro".equals(action)){

    SjLDAO hhp = new SjLDAOImpl();

    try {

    List list = hhp.getPro();

    StringBuffer sb = new StringBuffer();

    sb.append("");

    for(int i = 0;i

    sb.append(""+list.get(i).getPname()+"");

    }

    sb.append("");

    String s = sb.toString();

    PrintWriter out = response.getWriter();

    response.setContentType("text/xml;UTF-8");

    response.setCharacterEncoding("UTF-8");

    out.println(s);

    out.flush();

    out.close();

    } catch (SQLException e) {

    // TODO Auto-generated catch block

    e.printStackTrace();

    }

    }else if("changPro".equals(action)){

    String pid =request.getParameter("pid");

    int j = Integer.parseInt(pid);

    SjLDAO hhp = new SjLDAOImpl();

    try {

    List list = hhp.getCity(j);

    StringBuffer sb = new StringBuffer();

    sb.append("");

    for(int i=0;i

    sb.append(""+list.get(i).getCname()+"");

    }

    sb.append("");

    String s = sb.toString();

    PrintWriter out = response.getWriter();

    response.setContentType("text/xml;UTF-8");

    response.setCharacterEncoding("UTF-8");

    out.println(s);

    out.flush();

    out.close();

    } catch (SQLException e) {

    // TODO Auto-generated catch block

    e.printStackTrace();

    }

    }else if("duanPro".equals(action)){

    String cid = request.getParameter("cid");

    int j= Integer.parseInt(cid);

    SjLDAO hhp = new SjLDAOImpl();

    try {

    List list = hhp.getDistrictVO(j);

    StringBuffer sb = new StringBuffer();

    sb.append("");

    for(int i = 0;i

    sb.append(""+list.get(i).getDname()+"");

    }

    sb.append("");

    String s = sb.toString();

    PrintWriter out = response.getWriter();

    response.setContentType("text/xml;UTF-8");

    response.setCharacterEncoding("UTF-8");

    out.println(s);

    out.flush();

    out.close();

    } catch (SQLException e) {

    // TODO Auto-generated catch block

    e.printStackTrace();

    }

    }

    }

    }

    10. 配置web.xml

    11. 添加jquery.js 框架

    12.       html页面

    三级联动实例

    $(document).ready(function(){

    $.ajax({

    url:'SjLdServlet',

    typt:'post',

    data:'action=pro',

    dateType:'xml',

    success:function(data){

    $(data).find('pr').each(function(){

    var id=$(this).attr("value");

    var text=$(this).text();

    $('#select1').append(""+text+"")

    })

    }

    })

    $('#select1').change(function(){

    var text=$("select[id='select1'] option[selected]").text();

    var pid=$("select[id='select1'] option[selected]").attr("value");

    $.ajax({

    url:'SjLdServlet',

    typt:'post',

    data:'action=changPro&pid='+pid+'&text='+text,

    dataType:'xml',

    success:function(data){

    $('#select2').html('');

    $(data).find('city').each(function(){

    var id=$(this).attr("value");

    var text=$(this).text();

    $('#select2').append(""+text+"");

    });

    }

    })

    })

    $('#select2').change(function(){

    var text=$("select[id='select2'] option[selected]").text();

    var cid=$("select[id='select2'] option[selected]").attr("value");

    $.ajax({

    url:'SjLdServlet',

    type:'post',

    data:'action=duanPro&cid='+cid+'&text='+text,

    dataType:'xml',

    success:function(data){

    $('#select3').html('');

    $(data).find('district').each(function(){

    var id=$(this).attr("value");

    var text=$(this).text();

    $('#select3').append(""+text+"");

    });

    }

    })

    })

    })

    省: 请选择市: 请选择县: 请选择
    展开全文
  • 省市级三级联动js脚本,数据回显整合代码
  • vue2省市区三级联动,mysql,html/jsp,js/json,修复某些地区缺少。
  • 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表:代码如下:建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为:$(document).ready(function(){$.get(...

    此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表:

    代码如下:

    建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为:

    $(document).ready(function(){

    $.get("getProvince.do", function(result){

    $("#showp").html(result);

    });

    })

    var xmlhttp;

    function mysend(str){

    $(document).ready(function(){

    $("#show2").html("");

    })

    var show = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show");

    show.innerHTML = "";

    var province = document.getElementByIdx_x_x_x_x_x_x_x_x_x("province").value;

    if(province!=0){

    if(window.XMLHttpRequest){

    xmlhttp = new XMLHttpRequest();

    }else{

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function(){

    if(xmlhttp.readyState==4 && xmlhttp.status==200){

    show.innerHTML = xmlhttp.responseText;

    }

    }

    var ss = encodeURIComponent(str);

    xmlhttp.open("GET","getCity.do?provinceid="+ss,true);

    xmlhttp.send(null);

    }

    }

    function myarea(str){

    if(window.XMLHttpRequest){

    xmlhttp = new XMLHttpRequest();

    }else{

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function(){

    if(xmlhttp.readyState==4 && xmlhttp.status==200){

    var show2 = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show2");

    show2.innerHTML = xmlhttp.responseText;

    }

    }

    var ss = encodeURIComponent(str);

    xmlhttp.open("GET","getArea.do?cityid="+ss,true);

    xmlhttp.send(null);

    }

    html页面中的代码为:

    所在地

    action中的代码为:

    package mobi.zhangsheng.jiejia.action;

    import java.io.IOException;

    import java.io.PrintWriter;

    import java.util.List;

    import javax.annotation.Resource;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.apache.struts2.ServletActionContext;

    import org.springframework.stereotype.Controller;

    import mobi.zhangsheng.jiejia.domain.Areas;

    import mobi.zhangsheng.jiejia.service.AgentsService;

    import mobi.zhangsheng.jiejia.service.AreasService;

    @Controller

    public class ProvinceAction {

    private int provinceid;

    private int cityid;

    @Resource

    private AreasService as;

    @Resource

    private AgentsService ags;

    public int getProvinceid() {

    return provinceid;

    }

    public void setProvinceid(int provinceid) {

    this.provinceid = provinceid;

    }

    public int getCityid() {

    return cityid;

    }

    public void setCityid(int cityid) {

    this.cityid = cityid;

    }

    public void getProvince(){

    List provinceList = as.getAreasPrvinceList();

    HttpServletResponse resp= ServletActionContext.getResponse();

    HttpServletRequest request = ServletActionContext.getRequest();

    //resp.setContentType("xml");

    resp.setContentType("text/html");

    resp.setCharacterEncoding("utf-8");

    try {

    PrintWriter out = resp.getWriter();

    out.print("

    344a2da54a63b4c18cc2ccecce0ae4a4.png");

    //out.print("shanghai");

    } catch (IOException e) {

    e.printStackTrace();

    }

    }

    public void getCity(){

    List cityList = as.getAreasCityList(provinceid);

    HttpServletResponse resp= ServletActionContext.getResponse();

    //resp.setContentType("xml");

    resp.setContentType("text/html");

    resp.setCharacterEncoding("utf-8");

    try {

    PrintWriter out = resp.getWriter();

    out.print("

    a8b17640e5c5664206511c9770aebca6.png");

    //out.print("shanghai");

    } catch (IOException e) {

    e.printStackTrace();

    }

    }

    public void getArea(){

    List areaList = as.getAreasCityList(cityid);

    if(areaList.size()==0){

    }else{

    HttpServletResponse resp= ServletActionContext.getResponse();

    resp.setContentType("text/html");

    resp.setCharacterEncoding("utf-8");

    try {

    PrintWriter out = resp.getWriter();

    out.print("

    1b073e4f352c560dd2dd67a2a8b6dda1.png");

    } catch (IOException e) {

    e.printStackTrace();

    }

    }

    }

    }

    主要的功能代码都在上面了,如有不懂的请联系QQ:1037139984,祝大家都有好的发展,共同学习,共同成长。

    展开全文
  • 效果图:HTML代码:报名区域:省份:城市:区县:js代码:/* 省市县三级联动 */$(function(){$.ajax({type:"POST",cache:false,url:"/agent/index/areaDate",data:{"pid":0},//data:{"tree_path":","},dataType:"json",...

    效果图:

    5013e7031e215f0a48ae444bb5625f55.png

    HTML代码:

    报名区域:

    省份:

    城市:

    区县:

    js代码:

    /* 省市县三级联动  */

    $(function(){

    $.ajax({

    type:"POST",

    cache:false,

    url:"/agent/index/areaDate",

    data:{"pid":0},

    //data:{"tree_path":","},

    dataType:"json",

    success:function(data){

    var option='--请选择--';

    //data.date.list.forEach(function(val, index) {

    $.each(data.date,function(i,n){

    option += ''+n.name+'';

    })

    $("#pro").append(option);

    }

    });

    //市

    $("#pro").change(function(){

    var pid=$(this).val();

    $.ajax({

    type:"POST",

    cache:false,

    url:"/agent/index/areaDate",

    data:{"pid":pid},

    dataType:"json",

    success:function(data){

    //追加本级option前,先清除city和county的option,以免重选时干扰

    $("#city option").remove();

    $("#county option").remove();

    var option='--请选择--';

    $.each(data.date,function(i,n){

    option += ''+n.name+'';

    })

    $("#city").append(option);

    }

    });

    });

    //区/县

    $("#city").change(function(){

    var pid=$(this).val();

    $.ajax({

    type:"POST",

    cache:false,

    url:"/agent/index/areaDate",

    data:{"pid":pid},

    dataType:"json",

    success:function(data){

    //同上

    $("#county option").remove();

    var option='--请选择--';

    $.each(data.date,function(i,n){

    option += ''+n.name+'';

    })

    $("#county").append(option);

    }

    });

    });

    })

    java代码:

    /**

    * 加载省市县三级数据

    * @param request

    * @param model

    * @return

    * @author: jinchunzhao

    * @throws

    * @date:   2019年1月21日 上午9:20:54

    */

    @ResponseBody

    @RequestMapping(value="/areaDate",method=RequestMethod.POST)

    public JsonResult areaList(HttpServletRequest request,Model model){

    try {

    LoginAguser loginAguser = SessionApi.getCurrentAguser(request.getSession());

    if (loginAguser == null) {

    request.setAttribute(CoinConfig.WEB_TITLE, "登录");

    return JsonResult.error("登录信息异常,请重新登录", null);

    }

    String pid = request.getParameter("pid");

    List list = areaService.findByPid(pid);

    return JsonResult.success("success", list);

    } catch (Exception e) {

    logger.error(e.getMessage());

    e.printStackTrace();

    return JsonResult.error("系统异常,无法访问", null);

    }

    }

    数据库部分数据:

    b5c2fec035ba8264279f7a126f2ba593.png

    数据库中所有数据:

    https://download..net/download/jinchunzhao123/10931730

    展开全文
  • 三级联动+数据库

    2021-04-23 09:10:20
    jsp页面三级联动+数据库sanjilist = sanjiDao.getSanjilistBySql(sql1);session.setAttribute("provinces", sanjilist);%>省:请选择...${ province.name}市:请选择...县:请选择...servlet;package servlet;...
  • Easyui调用数据库实现省市县区三级联动的效果如果下1、首先要设计数据库,如图所示。一个有4个字段code,note,pycode。code:行政区划代码,note:中文注释,pycode:拼音缩写。 其中code是由6个字段组成。如果是...
  • 省市县三级联动

    2016-04-13 14:16:05
    省市县三级联动,包括 java + jsp + mysql 的实现方式,还有 dwr 实现方式,还有 js + html 实现方式
  • 实现省市区三级下拉列表框,并且要实现联动效果。 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5...
  • 可自行转成json,三级联动,children
  • java省市县三级联动项目笔记 项目笔记 本文需要先导入jquery包,否则ajax无法使用 大家在开发的过程中都往往会用到省市县三级联动,本文记录了一个html+ajax+mysql的三级联动,话不多说,直接上代码 html页面 <!...
  • Java中省市区三级联动,附前后台及数据库

    万次阅读 多人点赞 2019-05-17 11:59:55
    Java中省市区三级联动,附前后台及数据库 后台代码controller @Controller @RequestMapping("/login")public class testController { @Autowired private testservice testService; @RequestMapping("test") ...
  • /p><.selBoxList {width: 100%;margin-top: 50px;text-align: center;}.selBoxList .selSt {min-width: 100px;display: inline-block;position: relative;;}.selBoxList .selSt .current {width: 100%;...
  • 完整的省市区三级联动数据库的sql数据
  • java实现省市区三级联动

    万次阅读 热门讨论 2020-01-19 15:14:08
    一、实现三级联动 以省市区为例: 我的想法很简单 ,可能想的有点少,首先遍历省份,当数据发生改变调用方法请求根据省的id去查询市区的信息,当市区信息发生改变调用另一个方法去查询县区的信息 1、实体类entity:...
  • java实现省市区三级联动(JavaWeb)

    千次阅读 2020-12-09 09:55:31
    前台代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...省市区三级联动</title> <script src="./js/jquery-3.3.1.js"></script&g...
  • 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,...JS年月日三级联动下拉框日期选择代码</title
  • 在二级联动的基础上html部分学校--请选择学校--{{v.name}}js部分getdayschool:function () {$.ajax({type: "post",url: baseurl + "platform/notice1/all123",contenttype: "application/json",success: function (r...
  • 三级联动(地址)

    2018-08-31 12:06:34
    三级联动地址
  • 本文运用javaweb的ajax技术与数据库的交互实现数据库的三级联动
  • 本文实例讲述了javascript实现省市区三级联动下拉框菜单代码。分享给大家供大家参考,具体如下 运行效果截图如下:  首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS...
  • struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
  • 这是从腾讯QQ注册的所在地, 所获取出来的数据,如有问题问老马!
  • 简单分享一下地区三级联动的代码思路 数据库思路

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,681
精华内容 1,872
关键字:

java的js三级联动

java 订阅