省市县的三级联动

最新推荐文章于 2024-09-11 09:29:40 发布

原创最新推荐文章于 2024-09-11 09:29:40 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DWR #JavaScript #SQL #Bean #DAO #ViewUI

本文介绍了一种使用DWR技术实现网页上省市县三级联动的选择框功能。通过JavaScript调用Java后台服务获取地区数据，并利用DWR进行异步交互。具体实现了根据已选省份加载对应城市，再根据所选城市加载相应区县的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码：

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>