筑坐极_省市区三级选择器

1)准备好所用文件省市区链接

<!--手机不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--所用的js文件-->
<script type="text/javascript" src="js/jquery.3.6.0.js"></script>
<!--所用的地图-->
<script type="text/javascript" src="js/china.city.data.js"></script>
<!--所用的css-->
<link rel="stylesheet" href="css/bootstrap.5.1.min.css">

2）div部分

<div class="container">
    <div class="row justify-content-center mt-3" >
    <div class="col-12 col-md-4 col-xl-3"></div>
    <div class="col-12 col-md-4 col-xl-6">
        <div class="row">
            <div class="col-12 col-md-4 col-xl-4 mt-3">
                <select name="pro" id="pro" class="form-control form-select">
                    <option >--请选择省份--</option>
                </select>
            </div>
            <div class="col-12 col-md-4 col-xl-4 mt-3">
                <select name="city" id="city" class="form-control form-select">
                    <option >--请选择城市--</option>
                </select>
            </div>
            <div class="col-12 col-md-4 col-xl-4 mt-3">
                <select name="area" id="area" class="form-control form-select">
                    <option >--请选择地区--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3"></div>
    </div>
</div>

3）js部分内容

  <script type="text/javascript">
    china.forEach(function (icon) {
        let a=icon["name"];
        console.log(a);
        let b="<option >"+a+"</option>";
        $("#pro").append(b);
    })

    let pro_idx = null;
    $("#pro").change(function () {
        $("#city").empty();
        $("#city").append("<option>--请选择城市--</option>");
        $("#area").empty();
        $("#area").append("<option>--请选择地区--</option>");
        let  c=$(this).val()
        if (!c.startsWith("--"))
        {
            let cities=[];
            china.forEach(function (icon,idx) {
                if (icon.name === c) {
                    pro_idx = idx;
                    cities = icon.city
                }
                $("#city").empty();
                $("#city").append("<option>--请选择城市--</option>");
                cities.forEach(function (icon) {
                    let d = "<option >" + icon.name + "</option>";
                    $("#city").append(d);
                })
            })
        }
    })

ps: 滴水穿石

省市区三级选择器

苏*

css,js,jQuery

前端开发

2021.08.25

827人

苏*

天津市河东区

Hot:18932

苏*

当前作品暂无评分

还未获得评语哦~