当前位置：网站首页>Select drop-down box realizes three-level linkage of provinces and cities in China

Select drop-down box realizes three-level linkage of provinces and cities in China

2022-07-05 12:07:00 【**inevitable**】

JS Select The drop-down box realizes the three-level linkage of provinces and cities in China

Linkage effect

Take Inner Mongolia Autonomous Region as an example
Insert picture description here

Insert picture description here
Insert picture description here

distpicker.js The resource acquisition

https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1kkuw

Extraction code ：7rjv

HTML structure 

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Multi level linkage in urban areas of China </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        crossorigin="anonymous">
    <style>
        .test {
            border: 1px solid red;
            width: 600px;
            height: 100px;
            margin: 200px 450px;
        }

        .form-inline {
            margin-left: 35px;
            margin-top: 25px;
        }
    </style>
</head>

<body>

    <div class="test">
        <form class="form-inline">
            <div data-toggle="distpicker">
                <select class="form-control" data-province="----  Select Province  ----"></select>
                <select class="form-control" data-city="----  Choose the city  ----"></select>
                <select class="form-control" data-district="----  Selection area  ----"></select>
            </div>
        </form>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="./js/distpicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</body>

</html>

Pay attention to the introduction of distpicker.js The path of , Just change to your own path

原网站

版权声明
本文为[**inevitable**]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140533367090.html

边栏推荐

猜你喜欢

随机推荐