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

今日作业:省市区三级选择器

效果展示: 省市区三级选择器

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

1).链接好必需的资源文件:

<!--jQuery-->
<script type="text/javascript" src="js/jquery.3.6.0.js"></script>
<!--手机端不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--省市区的数据 详情在第3步-->
<script type="text/javascript" src="js/china.city.data.js"></script>
<!--Bootstrap的CSS-->
<link rel="stylesheet" href="Css/bootstrap.5.1.min.css">

2).html部分

<div class="container">
    <div class="row" >
        <div class="col-12 col-md-1 col-xl-3"></div>
        <div class="col-12 col-md-10 col-xl-6">
            <div class="row">
                <div class="col-12 col-md-4 mt-4">
                    <select name="pr" id="pr" class="form-control form-select">
                        <option>--请选择省份--</option>
                    </select>
                </div>
                <div class="col-12 col-md-4 mt-4">
                    <select name="city" id="city" class="form-control form-select">
                        <option>--请选择城市--</option>
                    </select>
                </div>
                <div class="col-12 col-md-4 mt-4">
                    <select name="area" id="area" class="form-control form-select">
                        <option>--请选择区县--</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-1  col-xl-3"></div>
    </div>
</div>

3).js代码的部分

<script type="text/javascript">
    PROVINCE_DATA.forEach(function (item) {
        $("#province").append("<option>"+item.name+"</option>>");
    })
    let idx = 0;//是第一列option的下标
    $("#province").change(function () {
        let option = $(this).val();
        if(!option.startsWith("--")){
            let cities = [];

            PROVINCE_DATA.forEach(function (item,index) {
                if (option == item.name){
                    cities = item.city;
                    idx = index;
                }
            });
            $("#city").empty(); //清空
            $("#city").append("<option>--请选择城市--</option>");
            cities.forEach(function (item) {
                $("#city").append("<option>"+item.name+"</option>>");
            })
        }

    })

    $("#city").change(function () {
        let option = $(this).val();
        let oneOption = PROVINCE_DATA[idx];
        let areas = [];
        oneOption.city.forEach(function (item) {
            if(option == item.name){
                areas = item.area;
            }
        })
        $("#area").empty(); //清空

        $("#area").append("<option>--请选择区县--</option>");
        areas.forEach(function (item) {
            $("#area").append("<option>" + item + "</option>");
        })

    })
</script>

千里之行始于足下

省市区三级选择器

徐**

html,js,jQuery

通过三级选择器可以确定大概的省市区

2021.08.26

808人

徐**

安徽省巢湖地区巢湖市

Hot:3579

徐**

当前作品暂无评分

还未获得评语哦~