`

省市县的三级联动

阅读更多

js代码:

function selectProvince(provinceId) {
    ProvinceAction.getChildByParentId(provinceId, returnProvince);//根据省的id得到市
}

// 回调函数
function returnProvince(data) {//返回一个map<id,name>
    var city;
    var city = $("city");
    dwr.util.removeAllOptions(city);
    dwr.util.addOptions(city, {'':'=请选择='});
    dwr.util.addOptions(city, data);//把市添加进去
}

function selectCity(){//选择城市
    var city = $("city");
    var city_index = city.selectedIndex;
    var city_value = city.options[city_index].value;
    ProvinceAction.getChildByParentId(city_value, returnCountry);//根据市的id得到县
}

function returnCountry(data){
    var country = $("country");
    dwr.util.removeAllOptions(country);
    dwr.util.addOptions(country, {'':'=请选择='});
    dwr.util.addOptions(country, data);//把县添加进去
}

 

jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/util.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/ProvinceAction.js'></script>
<script type="text/javascript" src='js/province.js'></script>
</head>
<body>

<select id="province" onchange="selectProvince(this.options[this.selectedIndex].id)">
    <option>=请选择=</option>
    <s:iterator id="province" value="list">
        <option id='<s:property value="id"/>'><s:property value="name" /></option>
    </s:iterator>
</select>
市<select id="city" onchange="selectCity(this.options[this.selectedIndex].id)">
    <option>=请选择=</option>
</select>
区/县<select id="country">
        <option>=请选择=</option>
    </select>

<span id="showAge"></span>
</body>
</html>

 

Java代码:

package com.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.bean.Province;
import com.dao.ProvinceDao;
import com.db.DBUtil;

public class ProvinceDaoImpl implements ProvinceDao {

    @Override
    public List<Province> findAllProvince() {
        Connection conn = DBUtil.getConnection();
        PreparedStatement ps = null;
        List<Province> list = null;
        try {
            ps = conn.prepareStatement("select * from provice where parentid='0'");
            list = executeQuery(ps);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(ps);
        }
        return list;
    }

    @Override
    public Map<String,String> getChildByParentId(String parentId) {
        System.out.println("----"+parentId);
        Connection conn = DBUtil.getConnection();
        PreparedStatement ps = null;
        Map<String,String> map = new HashMap<String,String>();
        ResultSet rs = null;
        try {
            ps = conn.prepareStatement("select * from provice where parentId=?");
            ps.setString(1, parentId);
            rs = ps.executeQuery();
            while(rs.next()){
                map.put(rs.getString("id"), rs.getString("name"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return map;
    }
   
    public List<Province> executeQuery(PreparedStatement ps){
        List<Province> list = null;
        ResultSet rs = null;
        try {
            rs = ps.executeQuery();
            list = new ArrayList<Province>();
            while (rs.next()) {
                String id = rs.getString("id");
                String name = rs.getString("name");
                String parentId = rs.getString("parentid");
                Province province = new Province();
                province.setId(id);
                province.setName(name);
                province.setParentId(parentId);
                list.add(province);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

 

dwr.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="ProvinceAction">
            <param name="class" value="com.action.ProvinceAction"></param>
        </create>
        <convert match="com.bean.Province" javascript="Province" converter="bean"/>
    </allow>
</dwr>

分享到:
评论

相关推荐

    省市县三级联动.zip

    省市县三级联动是一种常见的前端数据组织方式,常用于地址选择、区域划分等功能,它通过三个层级的数据结构来表示中国的行政区域。在这个“省市县三级联动”压缩包中,包含了一个数据库表和JavaScript实现的代码,...

    省市县三级联动

    在IT行业中,"省市县三级联动"是一种常见的前端交互功能,尤其在网页表单填写时,用户选择省、市、县(区)时,下拉菜单会根据前一级的选择自动更新后两级的内容。这种功能提高了用户体验,减少了输入错误。下面我们...

    MySQL SQL 省市县三级联动(含台湾)

    "MySQL SQL 省市县三级联动(含台湾)"这个主题聚焦于一个特定的数据模型,即用于存储中国行政区域划分的数据库结构,它涉及到省级、市级和县级的层级关系,并且包含了台湾地区的数据。这样的设计在很多应用中都有...

    Excel省市县三级联动模

    "Excel省市县三级联动模型"是Excel应用中的一个高级技巧,它主要用于创建动态的数据选择系统,使得用户在选择一个省份后,相应的城市和县区会自动筛选出来,提供便捷的数据输入和查询体验。这种功能在处理具有层次...

    asp省市县三级联动,可自行修改 添加信息

    在ASP(Active Server Pages)开发中,省市县三级联动是一种常见的功能,用于在网页上创建交互式的下拉选择框,用户可以选择国家、省份、城市,甚至到县这一级的行政区域。这种功能常见于需要用户填写详细地址的场景...

    微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)

    微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有...

    省市县三级联动excel表

    省市县三级联动和商品类型二级联动excel表

    省市县三级联动sql下载+layui三级联动插件

    这里我们关注的是一个结合了这两方面的资源包,标题为“省市县三级联动sql下载+layui三级联动插件”。这个资源包主要用于实现前端与后端之间的三级联动效果,即省、市、县的选择菜单,当用户选择一个省份时,相应的...

    全国省市县三级联动数据库文件

    全国省市县三级联动数据库文件是一种常见的数据组织方式,主要用于存储国家、省份、城市以及区县等地理层级信息。这样的数据库设计对于实现地理位置相关的查询、分析和应用非常有用,例如在线地图服务、物流配送、...

    中国省市县三级联动数据库MYSQL

    中国省市县三级联动数据库MYSQL格式。

    js 省市县三级联动,特别好用

    在JavaScript编程中,"省市县三级联动"是一个常见的功能需求,尤其在开发涉及地理信息的Web应用时。这种联动效果通常用于地址选择,用户在选择省份后,市、县(区)的下拉框会自动更新,显示与所选省份对应的选项。...

    ajax asp.net省市县三级联动

    综上所述,"ajax asp.net 省市县三级联动"是通过Ajax技术和ASP.NET平台实现的一种用户界面交互功能,旨在提供流畅的地理位置选择体验。在实际项目中,还需要考虑错误处理、数据验证、性能优化等多方面因素,以确保...

    ASP.NET AJAX 省市县三级联动 带sql 完整数据库

    AJAX省市县三级联动之XMLHttpRequest XMLHttpRequest.html AJAX(Asynchronous JavaScript And XML,异步JavaScript 和XML),是2005 年由Google推广开来的一种编程模式。AJAX不是一种新的编程语言,而是一种使用现有...

    C#省市县三级联动菜单选择类

    省市县三级联动菜单选择类 ,你可以把它用到你的COMBOBOX控件中

    c#省市县三级联动

    在IT行业中,"c#省市县三级联动"是一种常见的功能设计,主要应用于各种需要选择地域信息的场景,如用户注册、物流配送等。这个概念主要涉及到C#编程语言,XML文件配置,以及前端和后端的数据交互。接下来,我们将...

    2019年4月中国最新行政区域省市县三级联动.sql

    2019年4月中国最新行政区域省市县三级联动.sql

    省市县三级联动(部分)

    省市县三级联动是一种常见的地理信息组织方式,常用于构建具有层级关系的地址系统。在IT领域,这通常涉及到数据库的设计,特别是在需要精确到县级或更细致级别的地理位置信息时。在这个场景下,数据库的设计至关重要...

    jquery+json省市县三级联动

    在IT行业中,"jquery+json省市县三级联动"是一个常见的前端开发需求,主要应用于网站的地址选择、区域筛选等场景。这个技术方案结合了jQuery库的强大力量和JSON的数据交换格式,使得用户可以在网页上方便地进行省、...

Global site tag (gtag.js) - Google Analytics