筑坐极_jQuery-省市区三级选择器

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

首先让我们来看一下最终效果：

jQuery-省市区三级选择器

然后准备好所用文件省市区链接

接下来一起看一下代码:

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代码的部分

ditu.forEach(function (item) {

    let a = "<option>" + item.name + "</option>";
    $("#pr").append(a);

})

let a_idx = null; //用来记录选中的省份的索引

$("#pr").change(function () {

    let x = $(this).val();
    if (!x.startsWith("--")) {
        let cities = [];

        //循环查找当前省份下的所有城市
        ditu.forEach(function (item,idx) {
            if (item.name === x) {

                a_idx=idx;
                cities = item.city;
            }
        });

        $("#city").empty(); //清空
        $("#city").append("<option>--请选择城市--</option>"); //追加默认


        //循环当前省份下的所有城市,并追加选项
        cities.forEach(function (item) {
            let b = "<option>" + item.name + "</option>";
            $("#city").append(b);
        })

    }

});

$("#city").change(function () {

    let cityName = $(this).val();
    let oneAa = ditu[a_idx];

    let areas = [];

    oneAa.city.forEach(function (i) {
        if (cityName === i.name) {
            areas = i.area;
        }
    });

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


})

纵有疾风起，人生不言弃。

jQuery-省市区三级选择器

韩琳*

html,js,jQuery

用html,js,jQuery完成的省市区三级选择器，这是一个非常常见的Web端功能

2021.08.25

902人

韩琳*

天津市宁河县

Hot:14567

韩琳*

当前作品暂无评分

还未获得评语哦~