js+jq实现选择框联动，已省市级联为例，超详细

柔情只为你懂 2023-10-08 12:34 63阅读 0赞

**jq的js文件需要自行官网下载或在联网情况下采用第三方jq库  
废话不多说直接上代码，注释超详细**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    </head>
    <body>
    <select id="sheng">
        <option>--请选择--</option>
    </select>
    <select id="shi">
        <option>--请选择--</option>
    </select>
    <script type="text/javascript">
        $(function () {
         
            var arr = new Array();
            arr["北京"] = ["海淀区","昌平区","大兴区","朝阳区"];
            arr["山东"] = ["济南市","德州市","烟台市","青岛市"];
            arr["黑龙江"] = ["齐齐哈尔市","哈尔滨市"];
            arr["辽宁"] = ["沈阳市","铁岭市","大连市"];
            for (var i in arr) {
         
                $("#sheng").append("<option value="+i+">"+i+"</option>");
            }
            //2.当省的列表选项发生变化时。
            $("#sheng").change(function () {
         
                $("#shi").empty();//每次发生改变，市的下拉列表要发生改变.
                $("#shi").append("<option>--请选择--</option>")
                //获取下拉列表框中选中的项的value值
                var val = $("#sheng").val();
                //将获取到的省的value值作为对应的市的数组的下标
                var values = arr[val];
                for(var v in values){
         
                    $("#shi").append("<option value='"+values[v]+"'>"+values[v]+"</option>")
                }
            })
        })
    </script>
    </body>
    </html>