省市区简单的三级联动

后台

/**
* <pre>项目名称:sanji
* 文件名称:SanController.java
* 包名:sanji
* 创建日期:2018年6月16日下午2:37:08
* Copyright (c) 2018, [email protected] All Rights Reserved.</pre>
*/
package com.gq.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.gq.dto.SanDto;
import com.gq.service.SanService;

/**
* <pre>项目名称：sanji
* 类名称：SanController
* 类描述：控制层
* 创建人：guoqiang [email protected]
* 创建时间：2018年6月16日下午2:37:08
* 修改人：guoqiang
* 修改时间-：2018年6月16日下午2:37:08
* 修改备注-：
* @version </pre>
*/
@Controller
public class SanController {
@Autowired
private SanService ser;
@RequestMapping("list")
public String list() {
return "san";
}
@RequestMapping("sheng")
@ResponseBody
public List<SanDto> sheng(String pid){
List<SanDto> list=ser.san(pid);
return list;
}

}

DAO.XML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.gq.dao.SanDao" >
<select id="san" resultType="com.gq.dto.SanDto" parameterType="String">
select * from sanji
<if test="pid==null">
where pid=0
</if>
<if test="pid!=null">
where pid=#{pid}
</if>
</select>

</mapper>

JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
</head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function (){
$.post(
"sheng.action",
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#sheng").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
$("#sheng").change(function(){
$("#shi").empty();//当省发生改变把以前市区的数据清空
$("#shi").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
$("#xian").empty();//一起把以前县的数据清空
$("#xian").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
var pid=$("#sheng").val();
if(pid!=0){
$.post(
"sheng.action",
{pid:pid},
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#shi").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
}
})
$("#shi").change(function(){
$("#xian").empty();//当市区发生该变把以前县的数据清空
$("#xian").append($("<option value='0'> 请选择</option>"));
var pid=$("#shi").val();
$.post(
"sheng.action",
{pid:pid},
function(obj){
for (var i = 0; i < obj.length; i++) {
$("#xian").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
}
},
"json"
)
})
})
</script>
<body>
<h1>三级联动</h1>
<select id="sheng">
<option value="0">请选择</option>
</select>
<select id="shi">
<option value="0">请选择</option>
</select>
<select id="xian">
<option value="0">请选择</option>
</select>
</body>

</html>

数据库sql

/*
Navicat MySQL Data Transfer

Source Server : 127.0.0.1
Source Server Version : 50628
Source Host : 127.0.0.1:3306
Source Database : sanji

Target Server Type : MYSQL
Target Server Version : 50628
File Encoding : 65001

Date: 2018-06-25 19:47:07
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for sanji
-- ----------------------------
DROP TABLE IF EXISTS `sanji`;
CREATE TABLE `sanji` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`pid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of sanji
-- ----------------------------
INSERT INTO `sanji` VALUES ('1', '北京', '0');
INSERT INTO `sanji` VALUES ('2', '山西', '0');
INSERT INTO `sanji` VALUES ('3', '河北', '0');
INSERT INTO `sanji` VALUES ('4', '河南', '0');
INSERT INTO `sanji` VALUES ('5', '山东', '0');
INSERT INTO `sanji` VALUES ('6', '海淀', '1');
INSERT INTO `sanji` VALUES ('7', '昌平', '1');
INSERT INTO `sanji` VALUES ('8', '丰台', '1');
INSERT INTO `sanji` VALUES ('9', '中关村', '6');
INSERT INTO `sanji` VALUES ('10', '西关环岛', '7');
INSERT INTO `sanji` VALUES ('11', '科技园', '8');
INSERT INTO `sanji` VALUES ('12', '太原', '2');
INSERT INTO `sanji` VALUES ('13', '吕梁', '2');
INSERT INTO `sanji` VALUES ('14', '小店', '12');
INSERT INTO `sanji` VALUES ('15', '尖草坪', '12');
INSERT INTO `sanji` VALUES ('16', '临县', '13');
INSERT INTO `sanji` VALUES ('17', '方山', '13');
INSERT INTO `sanji` VALUES ('18', '菏泽', '5');
INSERT INTO `sanji` VALUES ('19', '曹县', '18');
INSERT INTO `sanji` VALUES ('20', '石家庄', '3');
INSERT INTO `sanji` VALUES ('21', '新华区', '20');
INSERT INTO `sanji` VALUES ('22', '邓州', '4');
INSERT INTO `sanji` VALUES ('23', '镇平县', '22');

省市区简单的三级联动

猜你喜欢