select选择框和js实现省份城市级联查询

最新推荐文章于 2026-04-19 05:13:41 发布

原创最新推荐文章于 2026-04-19 05:13:41 发布 · 4.4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何利用HTML的select元素和JavaScript实现省份与城市的选择联动效果。当选择一个省份时，JavaScript监听onchange事件，通过控制器查询对应的市数据，并更新城市select选项，展示相应内容。

文章目录

单表的查询我们很轻易的就能够查出省份和城市，但是有很多情况需要进行级联选择查询，本文就是使用select和js实现！

实现效果

实现效果：选择省份，点击另一个select框显示对应城市。
在这里插入图片描述

如何实现

想要实现这样的效果我们需要给省份这个select添加一个onchange事件，通过js来控制城市的select展示的内容

代码

html代码：
th:value="" 这些代码是使用了Thymeleaf模板引擎，重点是添加一个onchange事件。

 <select class="input-text mySelect"  style="width: 180px; margin-top: 5px;" name="provinceId" id="provinceId" onchange="select_city()">
        <option value="">请选择省份</option>
        <option th:each="table:${listProvince}" th:value="${table.id}" th:text="${table.province}" ></option>
</select>
<select class="input-text mySelect"  style="width: 180px; margin-top: 5px;" name="cityId" id="cityId">
        <option value="">请选择城市</option>
        <option th:each="table:${listCity}" th:value="${table.id}" th:text="${table.city}"></option>
 </select>

controller代码：
queryWrapper、AjaxResult等都是项目里封装的方法，如果不明白很正常。这个方法的意思就是通过省份的id来查找到对应的城市，这些城市为一个List集合，之后将list返回给前端页面。

/**
     * 省份城市级联查询
     * @param provinceId
     * @return
     */
    @PostMapping("selectCity")
    @ResponseBody
    public AjaxResult selectCity(Long provinceId){
        List<City> listCity = null;
        if(provinceId != null){
            QueryWrapper<City>  queryWrapper = new QueryWrapper<>();
            queryWrapper.lambda().eq(City::getSubordinateProvinces,provinceId);
            listCity = cityService.list(queryWrapper);
        }
        return success(listCity);
    }

js代码：

<script type="text/javascript">
        $(function () {
            $("select[name='provinceId']").change(function () {
                select_city();
            })
        })
        function select_city() {
            var obj = document.getElementById("provinceId");
            var provinceId = obj.value;
            $.ajax({
                type: "post",//请求方式post
                url: "/font/fontIndex/selectCity",//请求对应的地址，进入controller
                data: {"provinceId": provinceId},//往controller中传入省份id
                dataType:"JSON",
                success: function (data) {//交互成功调用的回调函数，data为返回的城市json数据
                	//定义city变量为id是cityId的select
                    var city = $("#cityId");
                    //将select清空
                    city.empty();
                    //向select中追加option标签
                    city.append(" <option value=\"\">请选择城市</option>");
                    var d =data.data;
                    if (d != null){
                    	//循环返回的data数据，取得每个城市，追加option标签
                        for(var i =0 ;i < d.length;i++){
                            city.append("<option value=\'"+d[i].id+"\'>"+d[i].city+"</option>");
                        }
                    }
                },
                error: function () {
                    alert("请求失败了");
                }
            });
        };
</script>

标签

#级联查询 #js #select