三级省市联动

第一种方法

<!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 = [["朝阳","海淀区"],
                     ["徐汇","静安"],
                     ["深圳","珠海"]];

        var foodArr= [[["朝阳一街","朝阳二街"],["海淀区一街","海淀区二街"]],
                       [["徐汇一街","徐汇二街"],["静安一街","静安二街"]],
                       [["深圳一街","深圳二街"],["珠海一街","珠海二街"]]];
        $(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 (i,val) {
                        str += "<option>"+val+"</option>";
                       /*alert(i)//0
                         alert(val)//朝阳*/

                    })
                   $("#citys").html(str);

                    $("#citys").change(function () {
                       var num = $("#citys :checked").index();

                       if(num == 0){
                           $("#food").html("<option>---请选择市美食街------</option>");
                       }else{
                           var str = "<option>---请选择美食街------  </option>";
                           var food2 = foodArr[index-1][num-1];
                           $.each(foodArr[index-1][num-1],function () {
                               str += "<option>"+this+"</option>";
                           })
                           $("#food").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>
        <select  id="food">
            <option value="0">---请选择市美食街------ </option>
        </select><span>&nbsp街</span>
    </div>
</body>
</html>

第二种方法

<!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 = [["朝阳","海淀区"],
                     ["徐汇","静安"],
                     ["深圳","珠海"]];

        var foodArr= [[["朝阳一街","朝阳二街"],["海淀区一街","海淀区二街"]],
                       [["徐汇一街","徐汇二街"],["静安一街","静安二街"]],
                       [["深圳一街","深圳二街"],["珠海一街","珠海二街"]]];
        $(function () {
            $("#pro").change(function () {
                $("#citys").html("<option >---请选择市------ </option>");
                $("#food").html("<option >---请选择美食街------</option>");
                var index = $("#pro :checked").index();
               if(index == 0){
                   $("#citys").append($("#shi"));
               }else {
                    var arr2 =  arr[index-1];
                    $("#citys").append($("#shi"));
                    $.each(arr2,function (i,val) {
                        $("#citys").append("<option>"+val+"</option>");

                    })

                    $("#citys").change(function () {
                        $("#food").html("<option >---请选择美食街------</option>");
                       var num = $("#citys :checked").index();

                       if(num == 0){
                           $("#food").append($("#jie"));
                       }else{
                           $("#food").append($("#jie"));
                           var food2 = foodArr[index-1][num-1];
                           $.each(foodArr[index-1][num-1],function () {
                               $("#food").append("<option>"+this+"</option>");
                           })
                       }
                    })
               }


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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值