JS小案例_省市级联

最新推荐文章于 2024-09-13 17:32:25 发布

sunnyday.qiu

最新推荐文章于 2024-09-13 17:32:25 发布

阅读量243

点赞数

分类专栏： JS 文章标签： jquery json js javascript ajax

本文链接：https://blog.csdn.net/changyeyu_/article/details/106995027

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

省市级联案例

使用原生JS实现
使用JQuery和AJAX实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>
<select id="province">
    <option>--请选择省份--</option>
</select>
<select id="city">
    <option>--请选择城市--</option>
</select>
</body>

<script>
    // 省份数据
    var provinces= ["广东省","湖南省","广西省"];
    // 城市数据，数据是一个二维数组，其每个元素是一个数组
    var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];

    /*
    在页面加载完毕以后读取所有的省份，并且填充到#province中
    分析：动态创建option对象，并且设置 <option value="0">广东省</option> 这个value就是它对应的城市数组索引
     */
    window.onload = function () {
        //1.得到省份这个select对象
        let selectProvince = document.getElementById("province");
        //遍历省份这个数组
        for (let i = 0; i < provinces.length; i++) {
            let province = provinces[i];  //i=0  province=广东省
            //2.创建option对象
            let optionElement = document.createElement("option");
            //3.设置value和文本
            optionElement.value = i;
            optionElement.innerText = province;
            //4.添加到select的最后一个子元素
            selectProvince.appendChild(optionElement);
        }
    }

    /**
     * 省份下拉列表的改变事件
     */
    document.getElementById("province").onchange = function () {
        //value就是它的索引
        let arr = cities[this.value];  //得到相应城市的数组
        //得到城市下拉select对象
        let city = document.getElementById("city");  //city下拉列表对象
        //修改city中innerHTML
        city.innerHTML = "<option>--请选择城市--</option>";  //覆盖原来的下拉列表子元素
        //向城市下拉列表添加option
        //1. 遍历城市数组
        for (let i = 0; i < arr.length; i++) {
            let arrElement = arr[i];  //每个城市字符串
            //2. 创建option对象
            let optionElement = document.createElement("option");
            //3. 设置文本
            optionElement.innerText = arrElement;
            //4. 添加到select的最后一个子元素
            city.appendChild(optionElement);
        }
    }
    
    /* //jQuery + AJAX 修改后版本：
        $(function () {
        	//添加一级下拉列表
            $.get("json/province.json",
                function (data) {
                    $(data).each(function (i, e) {
                        $("#province").append(`<option value='${e}'>${e}</option>`);
                    })
                });
            //绑定一级下拉列表的改变事件
            $("#province").change(function () {
                //移除之前加载的下拉列表（也可通过html()方法覆盖）
                $("#city option:gt(0)").remove();
				//获取当前选中的一级下拉列表的值
                let province = $("#province option:selected").val();
				//添加二级下拉列表
                $.get("json/city.json",
                    function (data) {
                        let citys = data[province];//json对象类型，通过变量名获取其属性
                        $.each(citys, function (i, e) {
                            $("#city").append("<option>" + e + "</option>");
                        })
                    })
            })
        });*/
    
</script>
</html>