省市区，三级联动，jq

最新推荐文章于 2023-08-18 18:17:12 发布

翛翾梓

最新推荐文章于 2023-08-18 18:17:12 发布

阅读量213

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43118088/article/details/101461251

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

全部复制过，直接可以用，写的比较简陋

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        select,
        option,
        input,
        div {
            text-decoration: none;
            vertical-align: baseline;
            list-style: none;
            outline: none;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            /*去除下拉框默认样式*/
        }

        .box {
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
        }

        .box select {

            display: inline-block;
            width: 30%;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            text-align-last: center;
            height: 36px;
            line-height: 36px;
            font-size: 16px;
        }
        #Butn{
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            font-weight: 555;
            color: rgb(59, 40, 40);
            text-align: center;
            border: 1px solid #333333;
            margin: 20px 0;
            width: 100%;
        }
        .box select option {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            text-align-last: center;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
    </style>
    　
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
    <input type="buttom" name="" id="Butn">
    <div class="box">
        <select name="" id="shen">
            <option value="">--省--</option>
        </select>
        <select name="" id="city">
            <option value="">--市--</option>
        </select>
        <select name="" id="qu">
            <option value="">--区/县--</option>
        </select>
    </div>
</body>

</html>
<script>
    $(function () {
        // $("#Butn").
        $.get('-------url------', //省市区所有数据的接口
            function (data) {
                var areInfo = JSON.parse(data).areas;
                for (let i = 0; i < areInfo.length; i++) {
                    $('#shen').append('<option  value="' + i + '">' + areInfo[i].name + '</option>');
                    $('#shen').change(function () {
                        $('#city').children().not(':eq(0)').remove();
                        $('#qu').children().not(':eq(0)').remove();
                        iNum1 = $(this).children('option:selected').index();
                        var dataValue = $(this).val();
                        var shen = areInfo[dataValue].name
                        var shiValue = '';
                        for (let j = 0; j < areInfo[dataValue].city.length; j++) {
                            $('#city').append('<option  value="' + j + '">' + areInfo[dataValue].city[j].name + '</option>');
                            $('#city').change(function () {
                                $('#qu').children().not(':eq(0)').remove();
                                shiValue = $(this).val();
                                var shi = areInfo[dataValue].city[shiValue].name
                                console.log(shiValue)
                                console.log(shi)
                                var quValue = '';
                                for (let k = 0; k < areInfo[dataValue].city[shiValue].area.length; k++) {
                                    $('#qu').append('<option  value="' + k + '">' + areInfo[dataValue].city[shiValue].area[k].name + '</option>');
                                    $("#qu").change(function (param) {
                                        quValue = $(this).val();
                                        var qu = areInfo[dataValue].city[shiValue].area[quValue].name
                                        var str = shen +" - " +shi+" - " + qu;
                                        $("#Butn").val(str)
                                    })
                                }
                            })
                        }
                    });
                };
            })
        var post = ({  })
        console.log(post)

        if(true){
            post.a = 4;
            post.b = 5;
            post.c = 6;
            post.fn = function(){
                return 100*5;
            }();
        }
        console.log(post.fn)

    });

</script>

翛翾梓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
省市区，三级联动，jq

全部复制过，直接可以用，写的比较简陋<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫

专栏目录