二级省份联动

最新推荐文章于 2022-10-20 11:46:46 发布

zxkzhang

最新推荐文章于 2022-10-20 11:46:46 发布

阅读量103

点赞数

分类专栏：实例代码

本文链接：https://blog.csdn.net/zxkzhang/article/details/100528067

版权

实例代码专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <script src="js/jquery-3.4.0.js"></script>

    <script>
        /*var  pro = ["北京","上海","深圳"];*/
        var arr = [["朝阳","海淀区","东城区","通州"],
                     ["徐汇","静安","虹桥","金山"],
                     ["深圳","珠海","广州","惠州"]];
        $(function () {
            $("#pro").change(function () {
               var index = $("#pro :checked").index();
               if(index == 0){
                   $("#citys").html("<option>---请选择市------ </option>");
               }else {
                    var arr2 =  arr[index-1];
                    var str = "<option>---请选择市------ </option>";
                    $.each(arr2,function () {
                        str += "<option>"+this+"</option>";
                    })
                   $("#citys").html(str);
               }

            })
        })
    </script>
</head>
<body>
    <div style="height: 600px;width: 200px">
        <select  id="pro">
            <option value="0" selected>---请选择省份---</option>
            <option value="bj" >北京</option>
            <option value="sh" >上海</option>
            <option value="sz" >深圳</option>
        </select><span>&nbsp省</span>
        <select  id="citys">
            <option value="0">---请选择市------ </option>
        </select><span>&nbsp市</span>
    </div>
</body>
</html>

在这里插入图片描述

zxkzhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级省份联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级联动</title> <script src="js/jquery-3.4.0.js"></script> <scrip...
复制链接

扫一扫

专栏目录