利用JAVA Jquey实现三级联动，SpringMVC框架。

最新推荐文章于 2021-02-24 03:54:20 发布

黄焖鸡米

最新推荐文章于 2021-02-24 03:54:20 发布

阅读量385

点赞数 1

分类专栏：工具代码文章标签： JAVA SpringMVC Jquery 二级联动三级联动

本文链接：https://blog.csdn.net/dunpaixia083/article/details/86291244

版权

工具代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

利用JAVA实现省、市、县三级联动，方法简单。

数据库结构及数据。

建立好数据之间的关系

SET FOREIGN_KEY_CHECKS=0;

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

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', '四川省', '0');
INSERT INTO `user` VALUES ('2', '安徽省', '0');
INSERT INTO `user` VALUES ('3', '广东省', '0');
INSERT INTO `user` VALUES ('4', '成都市', '1');
INSERT INTO `user` VALUES ('5', '达州市', '1');
INSERT INTO `user` VALUES ('6', '安庆市', '2');
INSERT INTO `user` VALUES ('7', '芜湖市', '2');
INSERT INTO `user` VALUES ('8', '深圳市', '3');
INSERT INTO `user` VALUES ('9', '广州市', '3');
INSERT INTO `user` VALUES ('10', '高新区', '4');
INSERT INTO `user` VALUES ('11', '龙泉驿区', '4');
INSERT INTO `user` VALUES ('12', '双流区', '4');

JAVA代码

表名就叫user，随便取的。

package com.java.controller;

import com.java.model.User;
import com.java.model.UserExample;
import com.java.service.UserMapperService;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("loginController")
public class LoginController {

    private final static Logger log=Logger.getLogger(LoginController.class);
    @Autowired
    private UserMapperService userMapperService;
    @RequestMapping(value = "login.do")
    //查询出所有列表
    public String loginSet(Model model){
        UserExample userExample=new UserExample();
        List<User> user = userMapperService.selectByExample(userExample);
        model.addAttribute("userList",user);
        return "index";
    }
    //联动方法
    @RequestMapping(value = "oSelect.do")
    @ResponseBody
    public List<User> oSelect(String typeId){
        int id=Integer.parseInt(typeId);
        UserExample userExample=new UserExample();
        userExample.createCriteria().andTypeIdEqualTo(id);//根据typeId属性进行条件查询
        //sql语句如 select * from user where type_id='x';
        List<User> user = userMapperService.selectByExample(userExample);
        return user;
    }

}

Jquery 返回数据后，利用Jquery对data进行解析Json数组操作，原生格式如下

以下是JSP页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/9
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.8.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
    //该函数实现二级联动
    function printTest() {
        $(document).ready(function () {
            var s1=$("#s1").val();
            var secondCategoryObj =$("#secondTypeId").get(0);
            secondCategoryObj.innerHTML = "<option value=''>请选择</option>"
            $.ajax({
                type: "POST",
                url: "<%=request.getContextPath()%>/loginController/oSelect.do",
                data:{
                    typeId:s1
                },
                success: function (data) {
                    console.log(data);
                    //对返回的对象进行解析
                    for (var i=0;i<data.length;i++){
                        var name=data[i].name;
                        var id=data[i].id;
                        secondCategoryObj.innerHTML =  secondCategoryObj.innerHTML + "<option value='"+id+"'>"+name+"</option>";

                    }
                }
            });
        });
    }
    //三级联动
    function objTest(){
        $(document).ready(function () {
            var s1=$("#secondTypeId").val();
            var secondCategoryObj =$("#xian").get(0);
            secondCategoryObj.innerHTML = "<option value=''>请选择</option>"
            $.ajax({
                type: "POST",
                // contentType:"application/json",
                url: "<%=request.getContextPath()%>/loginController/oSelect.do",
                data:{
                    typeId:s1
                },
                success: function (data) {
                    console.log(data);
                    for (var i=0;i<data.length;i++){
                        var name=data[i].name;
                        var id=data[i].id;
                        secondCategoryObj.innerHTML =  secondCategoryObj.innerHTML + "<option value='"+id+"'>"+name+"</option>";
                    }
                }
            });
        });
    }
</script>

<!--一级，查询出所有单位-->
<form id="form1" name="form1">
<form:select path="userList" id="s1" name="s1" onchange="printTest();">
    <option>请选择</option>
    <c:forEach items="${userList}" var="list">
        <c:if test="${list.typeId==0}"> <!-- 只显示省级一级单位，数据库省级编号为0-->
        <option value="${list.id}" name="${list.name}">${list.name}</option>
        </c:if>
    </c:forEach>
</form:select>

    <!--二级，查询出市区单位-->
    <select id="secondTypeId" name="secondTypeId"  onchange="objTest();">
        <option value="">请选择</option>
    </select>

    <!--三级，查询出县级单位-->
    <select id="xian" name="xian">
        <option value="">请选择</option>
    </select>
</form>

</body>
</html>

最终完成三级联动，及四、五...n级联动都变得如此简单

黄焖鸡米

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用JAVA Jquey实现三级联动，SpringMVC框架。

利用JAVA实现省、市、县三级联动，方法简单。数据库结构及数据。建立好数据之间的关系SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for user-- ----------------------------DROP TABLE IF EXISTS `user`;C...
复制链接

扫一扫