jQuery+jsp实现省市县三级联动效果(附源码)-Java开发

实现省市县三级联动效果是Web开发中经常需要的功能之一。在这个过程中，jQuery 和 jsp 无疑是非常好的组合，因为 jQuery 可以方便的获取和操作DOM元素，jsp则具有动态生成html页面的优势。本文将分享一篇详细的攻略，教你如何使用 jQuery 和 jsp 实现

实现省市县三级联动效果是Web开发中经常需要的功能之一。在这个过程中，jQuery 和 jsp 无疑是非常好的组合，因为 jQuery 可以方便的获取和操作DOM元素，jsp则具有动态生成html页面的优势。本文将分享一篇详细的攻略，教你如何使用 jQuery 和 jsp 实现省市县三级联动效果，并附上完整的源码。

一、前置知识

在阅读本篇攻略前，你需要具备以下的前置知识：
- 基本的HTML、CSS、JavaScript语法
- jQuery基础知识
- jsp基础知识

二、使用jQuery获取省市县数据并生成下拉框

首先，我们需要从数据库或其他数据源中获取省市县数据。这里我们可以使用Ajax和jQuery来获取数据。具体的实现过程如下：

//通过Ajax从后台获取省份数据，并生成下拉框
$.ajax({
    url: "/province",  //后台请求的API接口
    type: "GET",
    dataType: "json",
    success: function(data){
        $("#province").html("");  //清空省份下拉框
        $.each(data, function(i, item){
            $("#province").append("<option value='" + item.id + "'>" + item.name + "</option>");
        });
        //触发省份下拉框的change事件，自动加载城市数据
        $("#province").trigger("change");
    }
});
//监听省份下拉框的change事件，自动加载城市数据
$("#province").change(function(){
    var provinceId = $(this).val();  //获取当前选择的省份id
    //通过Ajax从后台获取城市数据，并生成下拉框
    $.ajax({
        url: "/city",  //后台请求的API接口
        type: "GET",
        data: {provinceId: provinceId},
        dataType: "json",
        success: function(data){
            $("#city").html("");  //清空城市下拉框
            $.each(data, function(i, item){
                $("#city").append("<option value='" + item.id + "'>" + item.name + "</option>");
            });
            //触发城市下拉框的change事件，自动加载县区数据
            $("#city").trigger("change");
        }
    });
});
//监听城市下拉框的change事件，自动加载县区数据
$("#city").change(function(){
    var cityId = $(this).val();  //获取当前选择的城市id
    //通过Ajax从后台获取县区数据，并生成下拉框
    $.ajax({
        url: "/district",  //后台请求的API接口
        type: "GET",
        data: {cityId: cityId},
        dataType: "json",
        success: function(data){
            $("#district").html("");  //清空县区下拉框
            $.each(data, function(i, item){
                $("#district").append("<option value='" + item.id + "'>" + item.name + "</option>");
            });
        }
    });
});

上面的代码主要是通过 Ajax 从后台获取省市县的数据，并动态生成对应的下拉框。需要注意的是，当省份、城市和县区的下拉框值变化时，需要自动加载对应的数据。可以通过jQuery的trigger方法来触发这些change事件。

三、jsp动态生成下拉框

当我们已经成功获取到省市县数据，并在前端通过jQuery生成下拉框后，我们需要将这些下拉框动态插入到jsp页面中。此时，我们可以使用jsp语言动态生成html元素。

以下是一段使用jsp语言动态生成省份下拉框的示例代码：

<%
    //获取省份数据，通过JSONArray转换为字符串
    JSONArray provinceArr = new JSONArray(provinceList);
    String provinceJsonStr = provinceArr.toJSONString();
%>
<select id="province" name="province">
    <option value="">请选择省份</option>
    <% for(int i=0; i<provinceArr.size(); i++) { %>
        <% JSONObject province = provinceArr.getJSONObject(i); %>
        <option value="<%= province.getLong("id") %>"><%= province.getString("name") %></option>
    <% } %>
</select>

在上述代码中，我们首先通过后台接口获取到省份数据，并将其转换为 JSONArray 对象。然后使用 jsp 语言，通过循环遍历 provinceArr 数组，动态生成省份的下拉框。其中，省份数据采用了JSON格式进行传递，因此需要使用 JSONObject 和 JSONArray 进行转换。

通过类似的方式，我们还可以生成城市和县区的下拉框。

四、附源码

最后，附上完整的jQuery + jsp 实现省市县三级联动的源码，供大家参考。

<!--省份下拉框-->
<select id="province" name="province">
    <option value="">请选择省份</option>
</select>
<!--城市下拉框-->
<select id="city" name="city">
    <option value="">请选择城市</option>
</select>
<!--县区下拉框-->
<select id="district" name="district">
    <option value="">请选择县区</option>
</select>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function(){
        //通过Ajax从后台获取省份数据，并生成下拉框
        $.ajax({
            url: "/province",  //后台请求的API接口
            type: "GET",
            dataType: "json",
            success: function(data){
                $("#province").html("");  //清空省份下拉框
                $.each(data, function(i, item){
                    $("#province").append("<option value='" + item.id + "'>" + item.name + "</option>");
                });
                //触发省份下拉框的change事件，自动加载城市数据
                $("#province").trigger("change");
            }
        });
        //监听省份下拉框的change事件，自动加载城市数据
        $("#province").change(function(){
            var provinceId = $(this).val();  //获取当前选择的省份id
            //通过Ajax从后台获取城市数据，并生成下拉框
            $.ajax({
                url: "/city",  //后台请求的API接口
                type: "GET",
                data: {provinceId: provinceId},
                dataType: "json",
                success: function(data){
                    $("#city").html("");  //清空城市下拉框
                    $.each(data, function(i, item){
                        $("#city").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                    //触发城市下拉框的change事件，自动加载县区数据
                    $("#city").trigger("change");
                }
            });
        });
        //监听城市下拉框的change事件，自动加载县区数据
        $("#city").change(function(){
            var cityId = $(this).val();  //获取当前选择的城市id
            //通过Ajax从后台获取县区数据，并生成下拉框
            $.ajax({
                url: "/district",  //后台请求的API接口
                type: "GET",
                data: {cityId: cityId},
                dataType: "json",
                success: function(data){
                    $("#district").html("");  //清空县区下拉框
                    $.each(data, function(i, item){
                        $("#district").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                }
            });
        });
    });
</script>

<%
    //获取省份数据，通过JSONArray转换为字符串
    JSONArray provinceArr = new JSONArray(provinceList);
    String provinceJsonStr = provinceArr.toJSONString();
%>
<select id="province" name="province">
    <option value="">请选择省份</option>
    <% for(int i=0; i<provinceArr.size(); i++) { %>
        <% JSONObject province = provinceArr.getJSONObject(i); %>
        <option value="<%= province.getLong("id") %>"><%= province.getString("name") %></option>
    <% } %>
</select>

<%
    //获取城市数据，通过JSONArray转换为字符串
    JSONArray cityArr = new JSONArray(cityList);
    String cityJsonStr = cityArr.toJSONString();
%>
<select id="city" name="city">
    <option value="">请选择城市</option>
    <% for(int i=0; i<cityArr.size(); i++) { %>
        <% JSONObject city = cityArr.getJSONObject(i); %>
        <option value="<%= city.getLong("id") %>"><%= city.getString("name") %></option>
    <% } %>
</select>

<%
    //获取县区数据，通过JSONArray转换为字符串
    JSONArray districtArr = new JSONArray(districtList);
    String districtJsonStr = districtArr.toJSONString();
%>
<select id="district" name="district">
    <option value="">请选择县区</option>
    <% for(int i=0; i<districtArr.size(); i++) { %>
        <% JSONObject district = districtArr.getJSONObject(i); %>
        <option value="<%= district.getLong("id") %>"><%= district.getString("name") %></option>
    <% } %>
</select>

以上代码仅供参考，实际项目中需要根据自身需求进行修改。