下拉选择框 多级联动 动态显示

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">&times;</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真的太重要了！！！