如何使用Jquery动态生成二级选项列表

以下是使用Jquery动态生成二级选项列表的完整攻略：

1. 准备工作

在开始使用Jquery动态生成二级选项列表之前，需要确保已经引入了Jquery的库文件，如果没有可以通过Jquery的官网下载相应的库文件。代码示例中引用的是jquery-3.6.0.min.js。

<script src="jquery-3.6.0.min.js"></script>

2. HTML结构

在HTML中需要定义两个select元素，一个是一级选项列表，另一个是二级选项列表，代码示例中，一级选项列表的id为province，二级选项列表的id为city。

<select id="province">
    <option value="" selected>请选择</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广东">广东</option>
</select>

<select id="city">
    <option value="" selected>请选择</option>
</select>

3. Jquery代码

接下来我们就来看看使用Jquery动态生成二级选项列表的核心代码。代码中包含了click事件和ajax异步请求。

$(function(){
    $("#province").on("click",function(){
        $("#city").html("<option value='' selected>请选择</option>");
        $.ajax({
            type:"GET",
            url:"city.json",
            data:{
                province:$("#province").val()
            },
            dataType:"json",
            success:function(data){
                $.each(data,function(index,item){
                    $("#city").append("<option value='"+item+"'>"+item+"</option>");
                });
            }
        });
    });
})

代码解释：

• $("#province").on("click", function(){}) 表示为省份下拉框绑定了一个click事件。
• $("#city").html("<option value='' selected>请选择</option>"); 首先清空了城市下拉框中已选项。
• $.ajax() 表示发起了一个异步请求。
• type:"GET" 表示异步请求的类型为GET请求。

url:"city.json" 表示异步请求的地址，此处以获取城市数据的JSON文件为例。

data:{province:$("#province").val()} 表示异步请求所带的参数，即选中的省份。

dataType:"json" 表示返回的数据格式为JSON格式。

• success:function(data){} 表示异步请求成功后执行的回调函数。
• $.each(data,function(index,item){}) 表示循环遍历返回的城市数据。
• $("#city").append("<option value='"+item+"'>"+item+"</option>"); 表示将返回的城市数据添加到城市下拉框中。

4. JSON数据

最后，提供一份JSON数据以供参考，我们称之为city.json。

{
    "北京":["东城区","西城区","朝阳区","海淀区","丰台区"],
    "上海":["黄浦区","徐汇区","长宁区","静安区","普陀区"],
    "广东":["广州市","深圳市","珠海市","汕头市","潮州市"]
}

在该JSON数据中，key为省份，value为该省份的城市列表。

5. 示例说明

以下是两条示例说明：

示例一

假设页面中有多个一级选项列表和对应的二级选项列表，那么可以使用以下代码实现动态生成多个二级选项列表。

$(function(){
    $("select[id^='province']").on("click",function(){
        var index = $("select[id^='province']").index(this);

        $("select[id^='city']").eq(index).html("<option value='' selected>请选择</option>");

        $.ajax({
            type:"GET",
            url:"city.json",
            data:{
                province:$(this).val()
            },
            dataType:"json",
            success:function(data){
                $.each(data,function(index,item){
                    $("select[id^='city']").eq(index).append("<option value='"+item+"'>"+item+"</option>");
                });
            }
        });
    });
})

代码解释：

• $("select[id^='province']") 表示选中所有id以province开头的select元素。
• var index = $("select[id^='province']").index(this); 表示获取当前一级选项列表的索引。
• $("select[id^='city']").eq(index) 表示选中当前一级选项列表对应的二级选项列表元素，其索引为index。
• $.each(data,function(index,item){$("select[id^='city']").eq(index).append("<option value='"+item+"'>"+item+"</option>");}); 表示使用each循环向每个二级选项列表中添加对应的城市选项。

示例二

假设需要一个多级联动选项列表，可以使用以下代码实现。

$(function(){
    $("select[id^='level']").on("click",function(){
        var index = $("select[id^='level']").index(this);

        // 当前选中的选项
        var value = $(this).val();

        // 清空下级选项列表
        for(var i=index+1; i<$("select[id^='level']").length; i++){
            $("select[id^='level']").eq(i).html("<option value='' selected>请选择</option>");
        }

        $.ajax({
            type:"GET",
            url:"data.json",
            data:{
                level:value,
                index:index.toString()
            },
            dataType:"json",
            success:function(data){
                if(index == $("select[id^='level']").length - 1){
                    alert("已选择到最后一级："+value);
                }else{
                    var nextIndex = index + 1;
                    $("select[id^='level']").eq(nextIndex).append("<option value='' selected>请选择</option>");
                    $.each(data,function(index,item){
                        $("select[id^='level']").eq(nextIndex).append("<option value='"+item+"'>"+item+"</option>");
                    });
                }
            }
        });
    });
})

代码解释：

• $("select[id^='level']") 表示选中所有id以level开头的select元素。
• var index = $("select[id^='level']").index(this); 表示获取当前选项列表的索引。
• var value = $(this).val(); 表示获取当前选中的选项的值。
• for(var i=index+1; i<$("select[id^='level']").length; i++){$("select[id^='level']").eq(i).html("<option value='' selected>请选择</option>");} 表示清空下级选项列表。
• url:"data.json" 表示异步请求的地址，此处以获取数据的JSON文件为例。
• data:{level:value,index:index.toString()} 表示异步请求所带的参数，其中level为当前选中的选项，index为当前选项列表的索引，需要注意的是index需要转换为字符串形式。
• if(index == $("select[id^='level']").length - 1){alert("已选择到最后一级："+value);}else{} 表示如果当前选中的是最后一级，则弹出提示信息，否则继续向下级添加选项。