jQuery实现三级联动效果

下面是jQuery实现三级联动的完整攻略：

1. 参考资料

本攻略借鉴了廖雪峰老师的 JavaScript入门篇和全栈工程师颜海镜的《Web前端入门实战》。

2. 实现思路

三级联动通常基于以下逻辑：

• 第一级选项改变，第二级选项变化；
• 第二级选项改变，第三级选项变化。

那么我们的实现思路就是：

1. 第一级选项的改变：
   • 给第一级下拉框添加监听器 $("#select1").change(function(){})
   • 在监听器中获取用户的输入值 value = $(this).val()
   • 根据用户的输入值，ajax请求后端获取第二级联动数据
   • 构造第二级下拉框选项，添加到页面中
2. 第二级选项的改变：
   • 给第二级下拉框添加监听器 $("#select2").change(function(){})
   • 在监听器中获取用户的输入值 value = $(this).val()
   • 根据用户的输入值，ajax请求后端获取第三级联动数据
   • 构造第三级下拉框选项，添加到页面中

3. 示例说明

示例一

下面的示例是一个简易的三级联动示例，实现了省、市、县级联动选择。

<select id="select1"></select>
<select id="select2"></select>
<select id="select3"></select>

<script>
$(function() {
        $("#select1").change(function () {
            var provinceCode = $(this).val();
            $.get("/cities",{province:provinceCode},function(cities){
                $("#select2").empty();
                $("#select2").append("<option value=\"\"></option>")
                $(cities).each(function(index, item){
                    $("#select2").append("<option value=\""+item.cityCode+"\">"+item.cityName+"</option>")
                })
            })

        });
        $("#select2").change(function () {
            var cityCode = $(this).val();
            $.get("/districts",{city:cityCode},function(districts){
                $("#select3").empty();
                $("#select3").append("<option value=\"\"></option>")
                $(districts).each(function(index, item){
                    $("#select3").append("<option value=\""+item.districtCode+"\">"+item.districtName+"</option>")
                })
            })

        });
    });
</script>

以上代码中，省市县数据的获取一般是通过ajax请求后端获取的，这里我们假设/provinces、/cities、/districts分别代表省市县的数据来源。

示例二

下面的示例是一个稍微复杂一点的三级联动示例，实现了大洲、国家、州/省级联动选择，并实现了option的分组。

<select id="continent"></select>
<select id="country"></select>
<select id="state"></select>

<script>
$(function() {
        $("#continent").change(function () {
            var continentCode = $(this).val();
            $.get("/countries",{continent:continentCode},function(countries){
                $("#country").empty();
                $("#country").append("<option value=''>请选择国家</option>");
                var groupBy = "";
                $(countries).each(function(index, item){
                    var currentGroup = item['continentName'];
                    if (currentGroup != groupBy) {
                        $("#country").append("<optgroup label=\""+currentGroup+"\"></optgroup>");
                        groupBy = currentGroup;
                    }
                    $("#country").append("<option value=\""+item.countryCode+"\">"+item.countryName+"</option>")
                })
            })

        });
        $("#country").change(function () {
            var countryCode = $(this).val();
            $.get("/states",{country:countryCode},function(states){
                $("#state").empty();
                $("#state").append("<option value=''>请选择州/省</option>");
                var groupBy = "";
                $(states).each(function(index, item){
                    var currentGroup = item['countryName'];
                    if (currentGroup != groupBy) {
                        $("#state").append("<optgroup label=\""+currentGroup+"\"></optgroup>");
                        groupBy = currentGroup;
                    }
                    $("#state").append("<option value=\""+item.stateCode+"\">"+item.stateName+"</option>")
                })
            })

        });
    });
</script>

以上代码中，大洲、国家、州/省数据也是通过ajax请求后端获取的，/continents、/countries、/states分别代表大洲、国家、州/省的数据来源。可以看到，这里我们使用了optgroup标签实现了option的分组效果。

通过以上两个示例，我们可以总结出实现三级联动的通用思路：监听用户的选择，根据用户的选择发送ajax请求获取联动数据，再构造新的下拉框选项进行联动。