1、涉及知识内容
1、js
2、jquery
3、js
4、bootstrap样式
2、效果图
3、数据库
CREATE TABLE `area` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL DEFAULT '0',
`area_level` int(11) NOT NULL,
`area_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of area
-- ----------------------------
INSERT INTO `area` VALUES ('1', '0', '1', '安徽省');
INSERT INTO `area` VALUES ('2', '0', '1', '北京市');
INSERT INTO `area` VALUES ('3', '0', '1', '上海市');
INSERT INTO `area` VALUES ('4', '1', '2', '合肥市');
INSERT INTO `area` VALUES ('5', '1', '2', '宿州市');
INSERT INTO `area` VALUES ('6', '4', '3', '瑶海区');
INSERT INTO `area` VALUES ('7', '4', '3', '包山区');
INSERT INTO `area` VALUES ('8', '3', '2', '浦东新区');
INSERT INTO `area` VALUES ('9', '3', '2', '徐汇区');
INSERT INTO `area` VALUES ('10', '3', '2', '杨浦区');
INSERT INTO `area` VALUES ('11', '3', '2', '松江区');
INSERT INTO `area` VALUES ('12', '3', '2', '宝山区');
4、Result.java
结果封装类
package com.lemon.pojo;/**
* @Author lemon
* @Date 2019/11/13 0013
*/
import java.util.List;
/**
* 结果封装类
* @Author lemon
* @Date 2019/11/13 0013
*/
public class Result {
//状态值
private Integer code;
//错误信息
private String err;
//结果
private List<Area> dataList;
//构造函数
public Result(Integer code, String err, List<Area> dataList) {
this.code = code;
this.err = err;
this.dataList = dataList;
}
//成功时的构造函数
public Result(Integer code, List<Area> dataList) {
this.code = code;
this.dataList = dataList;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getErr() {
return err;
}
public void setErr(String err) {
this.err = err;
}
public List<Area> getDataList() {
return dataList;
}
public void setDataList(List<Area> dataList) {
this.dataList = dataList;
}
}
5、SelectController.java
package com.lemon.controller;/**
* @Author lemon
* @Date 2019/11/12 0012
*/
import com.lemon.pojo.Area;
import com.lemon.pojo.Result;
import com.lemon.service.SelectService;
import org.apache.commons.collections.map.HashedMap;
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 java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 多级联动
* @Author lemon
* @Date 2019/11/12 0012
*/
@Controller
@RequestMapping("/select")
public class SelectController {
@Autowired
SelectService selectService = new SelectService();
//查询区域信息
@RequestMapping("/findarea")
@ResponseBody
public Result findArea(Integer level_id, Integer parent_id){
//查找区域列表
List<Area> areaList = null;
areaList = selectService.findAreaByLevelOrParentId(level_id, parent_id);
return new Result(100,areaList);
}
//保存区域信息
@ResponseBody
@RequestMapping("/saveArea")
public Object saveProSub() {
Map<String,Integer> map = new HashMap<>();
//这里假设保存成功 返回100
map.put("code",100);
return map;
}
}
5、select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级联动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
</head>
<body>
<div class="col-md-2">
<select class="form-control" name="sheng" id="sheng">
<option value="-1">请选择省</option>
</select>
<select class="form-control" name="shi" id="shi">
<option value="-1">请选择市</option>
</select>
<select class="form-control" name="qu" id="qu">
<option value="-1">请选择区</option>
</select>
<button class="btn btn-primary" id="saveArea">提交</button>
</div>
<!-- Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">区域选择</h4>
</div>
<div class="modal-body">
<div class="status-inline">
<i class="iconfont icon-error" id="i_icon"></i>
<span class="title" id="span_error">
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function (){
// //清空省市区下拉框内容
// $("#sheng").text("");
// $("#shi").text("");
// $("#qu").text("");
//自动加载所有一级省下拉框内容
$.ajax({
url: "/select/findarea",
type: "POST",
data:{
level_id: 1
},
dataType: 'json',
success: function (data) {
// console.log(data.dataList);
var html = "";
var len = data.dataList.length;
for(var i = 0; i < len; i++){
html = '<option value=' + data.dataList[i].id + '>' + data.dataList[i].area_name + '</option>';
//将内容追加到省级下拉框里
$("#sheng").append(html);
}
}
});
//市级下拉框内容
//改变省 下拉框内容时 执行
$("#sheng").change(function () {
// alert($(this).val());
//清空市区下拉框内容
$("#shi").text("");
$("#qu").text("");
//追加 第一个提示框
$("#shi").append('<option value="-1">请选择市</option>');
$("#qu").append('<option value="-1">请选择区</option>');
//一级下拉框选择的内容
var parent_id = $(this).val();
//加载二级市
$.ajax({
url: "/select/findarea",
type: "POST",
data:{
level_id: 2,
parent_id: parent_id
},
dataType: 'json',
success: function (data) {
// console.log(data.dataList);
var html = "";
var len = data.dataList.length;
for(var i = 0; i < len; i++){
html = '<option value=' + data.dataList[i].id + '>' + data.dataList[i].area_name + '</option>';
//将内容追加到市级下拉框里
$("#shi").append(html);
}
}
});
});
//区级下拉框内容
//改变市 下拉框内容时 执行
$("#shi").change(function () {
// alert($(this).val());
//清空区级下拉框内容
$("#qu").text("");
//追加 第一个提示框
$("#qu").append('<option value="-1">请选择区</option>');
//一级下拉框选择的内容
var parent_id = $(this).val();
//加载二级市
$.ajax({
url: "/select/findarea",
type: "POST",
data:{
level_id: 3,
parent_id: parent_id
},
dataType: 'json',
success: function (data) {
// console.log(data.dataList);
var html = "";
var len = data.dataList.length;
for(var i = 0; i < len; i++){
html = '<option value=' + data.dataList[i].id + '>' + data.dataList[i].area_name + '</option>';
//将内容追加到区级下拉框里
$("#qu").append(html);
}
}
});
});
//报警提示弹出的提示
function errorModal(tipText){
$('#i_icon').removeClass('icon-error');
$('#i_icon').removeClass('icon-success');
$('#i_icon').addClass('icon-error');
$('#span_error').text(tipText);
$('#errorModal').modal('show');
}
//点击提交 保存区域信息
$("#saveArea").click(function () {
// alert($("#sheng").val() == -1)
var sheng = $("#sheng").val();
var shi = $("#shi").val();
var qu = $("#qu").val();
//是否选择省
if(sheng == -1){
errorModal("请选择省");
return;
}
//是否选择市
if(shi == -1){
errorModal("请选择市");
return;
}
//是否选择区
if(qu == -1){
errorModal("请选择区");
return;
}
//保存区域信息
$.ajax({
url: "/select/saveArea",
type: "POST",
data:{
sheng: sheng,
shi: shi,
qu: qu
},
dataType: 'json',
success: function (data) {
if(data.code == 100){
errorModal("保存区域成功!");
}else{
errorModal("保存失败!");
}
}
});
});
});
</script>
</html>
6、总结:
掌握了js、jquery、bootstrp基本用法。
js真的太重要了!!!
js真的太重要了!!!
js真的太重要了!!!