springboot中jq实现二级联动i

最新推荐文章于 2022-04-06 21:45:53 发布

小白菜666

最新推荐文章于 2022-04-06 21:45:53 发布

阅读量401

点赞数 1

分类专栏： javaweb 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_41224638/article/details/106884219

版权

javaweb 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个关于武汉市及下属区域的数据库设计，包括创建表结构、插入数据以及使用MyBatis进行区域和街道的联动查询实现。通过前端与后端的交互，实现了城区与街道的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据库：

CREATE TABLE `h_district` (
  `did` int(11) NOT NULL AUTO_INCREMENT,
  `parentid` int(11) DEFAULT NULL,
  `dis_name` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`did`)
) ENGINE=InnoDB AUTO_INCREMENT=90 DEFAULT CHARSET=utf8;
insert  into `h_district`(`did`,`parentid`,`dis_name`) values (1,0,'武汉市')
,(2,1,'江岸区'),(3,1,'江汉区'),(4,1,'硚口区'),(5,1,'东西湖区')
,(6,1,'武昌区'),(7,1,'青山区'),(8,1,'洪山区'),(9,1,'汉阳区')
,(10,1,'东湖高新区'),(11,1,'江夏区'),(12,1,'蔡甸区'),(13,2,'百步亭')
,(14,2,'大智路'),(15,2,'堤角'),(16,2,'二七'),(17,2,'后湖'),
(18,2,'黄埔路'),(19,2,'永清街'),(20,2,'前进路'),(21,2,'江汉路'),
(22,2,'三阳路'),(23,2,'台北路'),(24,2,'香港路'),(25,2,'唐家墩'),
(26,2,'花桥街'),(27,3,'宝丰路'),(28,3,'常青路'),(29,3,'西北湖'),
(30,3,'长港路'),(31,3,'万松园'),(32,3,'新华路'),(33,3,'杨汊湖'),
(34,4,'古田'),(35,4,'汉正街'),(36,4,'吴家山'),(37,4,'宗关'),
(38,5,'金银滩 '),(39,5,'将军路'),(40,5,'常青花园'),(41,5,'白沙洲'),
(42,6,'楚河汉街'),(43,6,'东湖'),(44,6,'东亭'),(45,6,'街道口'),
(46,6,'积玉桥'),(47,6,'水果湖'),(48,6,'首义路'),(49,6,'沙湖'),
(50,6,'团结大道'),(51,6,'武昌火车站'),(52,6,'徐东'),(53,6,'杨园'),
(54,6,'中北路'),(55,6,'中南路'),(56,7,'红钢城'),(57,7,'建设一路'),
(58,7,'建设二路'),(59,7,'建设三路'),(60,7,'建设四路'),(61,7,'建设五路'),
(62,7,'建设七路'),(63,7,'建设十路'),(64,7,'白玉山'),(65,7,'武东路'),
(66,7,'罗家路'),(67,7,'八大家'),(68,7,'奥山世纪城'),(69,8,'虎泉'),
(70,8,'杨家湾'),(71,8,'珞狮南路'),(72,8,'珞狮北路'),(73,8,'南湖'),
(74,8,'光谷'),(75,8,'广埠屯'),(76,9,'王家湾'),(77,9,'钟家村'),
(78,9,'四新'),(79,10,'关山大道'),(80,10,'民族大道'),(81,10,'金融港'),
(82,10,'华科大'),(83,10,'光谷南'),(84,10,'花城大道'),(85,10,'软件园'),
(86,11,'藏龙岛'),(87,11,'庙山'),(88,11,'文化大道'),(89,12,'沌口');

mapper接口：

public interface DistrictMapper {
    //1.查询所有的城区 did=1   //2.根据城区查询对应的街道 did=？
    @Select("select * from h_district where parentId=#{did}")
    @Results(@Result(column = "dis_name",property = "disName"))
    List<District> selectDisArea(Integer did);
}

contrller类：

 @Autowired
    private DistrictMapper districtMapper;
  @RequestMapping("/addPage")
    public String addHousePage(Model model){
        //3.查询出所有的区域信息:城区 (和 街道)
        List<District> districts = districtMapper.selectDisArea(1);
        //4.上述集合存入model
        model.addAttribute("districts",districts);
        //5.跳转到新增页面
        return "admin/house/add_house";
    }
  
  @RequestMapping("/getStreetsById")
    @ResponseBody//城区和街道二级联动
    public  List<District> streets(Integer id){
        return districtMapper.selectDisArea(id);
    }

前端代码：

 <div class="am-form-group">
        <label for="doc-select-1" class="am-u-sm-2 am-form-label">城区</label>
        <div class="am-u-sm-4">
            <select id="doc-select-2" >
                <option th:value="${dis.did}" th:text="${dis.disName}" th:each="dis:${districts}"></option>
            </select>
            <span class="am-form-caret"></span>
        </div>
        <label for="doc-select-1" class="am-u-sm-1 am-form-label">街道</label>
        <div class="am-u-sm-5">
            <select id="doc-select-3" th:name="district_id">
                <option  th:text="街道" th:value="13"></option>
            </select>
            <span class="am-form-caret"></span>
        </div>
    </div>
<script src="js/jquery.min.js}"></script>
<script>
    //城区和街道的二级联动
    $("#doc-select-2").change(function () {
        //城区的id
        var id=$(this).val();
        //发送异步请求，查询对应的街道信息
        $.get("/house/getStreetsById",{"id":id},function (streets) {
            $("#doc-select-3").html("");//先清空，再填充
            $.each(streets,function (index,street) {
                var option='<option value="'+street.did+'">'+street.disName+'</option>';
                $("#doc-select-3").append(option);
            })
        });

    })
</script>

效果：