JSON实现三级级联

最新推荐文章于 2021-11-25 21:02:18 发布

qiangzhogshou

最新推荐文章于 2021-11-25 21:02:18 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qiangzhogshou/article/details/103423269

版权

一、目标

目标：在页面中实现省、市、区\县、的三级关联性下拉列表。
目标效果：

一、未选择省份时：市、区县均无选择
在这里插入图片描述

二、选择完上一级、下一级获取相对应的选项
在这里插入图片描述

三、更换上级选项、下级选项相应更换

在这里插入图片描述

二、思路和准备

一、思路：
先写出HTML标签、在逐步完成功能：①各列表能够获取数据库中的数据②上级列表选中值通过异步（ajax）实现下级列表更新数据③实现第二步：通过绑定事件，达到选中值便向服务器发送请求④响应处理和更新数据的细节

二、解决一些问题用到的方法：

JQuery实现事件绑定
重点：在服务器端获取数据库中数据，并向网页响应输出时，由于JAVA对象和Javascript网页元素不能过渡的文题，需要JSON实现对象转换
Servlet实现服务器响应

三、另外：

数据库area表（地区编号表）由于内容较多、本篇不提供，在这里只提一下表在应用中的主要特征：①表中各地名字（name）所对应的属性有code（六位）和parent_code②parent_code值为上一级的code值（例：郑州市parent_code值为河南省code值）③根据这种关系，便可通过上一级的code值做对应的parent_code值来寻找对应的下一级（例：省份中选择了河南省，便可根据将河南省的code值作为parent_code值寻找对应的市），这种表的关系是实现此功能的基础（关联性）
关于JDBC（实现数据库连接）的各种主要工具类，在之前的博客已经提供，在这里就不再赘述

三、代码实现

<!-- index.jsp  设置标签、绑定事件、实现异步 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
		<!-- 引入JQuery -->
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
		<!-- 引入JSON -->
		<script type="text/javascript" src="./js/json2.js"></script>
		<title>Insert title here</title>
	</head>
	<body>
		<!-- 下拉列表表单、并设置相应id值以实现相应功能 -->
		<form>
			<select id="province">
				<option>--请选择省份--</option>
			</select>
			<select id="city">
				<option>--请选择市--</option>
			</select>
			<select id="county">
				<option>--请选择区/县--</option>
			</select

最低0.47元/天解锁文章

qiangzhogshou

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JSON实现三级级联

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd...
复制链接

扫一扫