JavaScript（二十三）三级联动demo

最新推荐文章于 2021-03-03 17:41:44 发布

We_jia

最新推荐文章于 2021-03-03 17:41:44 发布

阅读量212

点赞数

分类专栏： JavaScript 文章标签：三级联动

本文链接：https://blog.csdn.net/We_jia/article/details/87892292

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

三级联动效果展示图

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
省：<select id="sheng">
    <option>--请选择--</option>
</select>
市：<select id="city_1">
    <option>--请选择--</option>
</select>
区：<select id="qu">
    <option>--请选择--</option>
</select>


<script src="./data/cityData.js"></script>
<script src="./data/data.js"></script>

<script>
    var sheng = document.getElementById("sheng");
    var city_1= document.getElementById("city_1");
    var qu = document.getElementById("qu");
    var Data = city[0];       //输出的是city中的第一个数据内容
    for (var key in Data) {
        var op = new Option(Data[key].name, key);
        //实例化一个对象   第一个参数文本值,Data[key].name 输出的是name值（陕西省） ，第二个参数value值 （陕西省的编号）
        sheng.appendChild(op);
    }
    /*onchange 文本发生变化事件*/
    var child;
    sheng.onchange = function () {
        city_1.options.length = 1;    //市位置的值清空   只保留了请选择
        qu.options.length = 1;        //区位置的值清空
        var shengnumber = this.value;       /* 省的键值*/
        child = Data[shengnumber].child;     //省的子元素  市
        for (var key in child) {
            var op = new Option(child[key].name, key);      // 市的名称  市的键值编码
            city_1.appendChild(op);        //追加给 市
        }
    }

    city_1.onchange = function () {       //市的值改变
                qu.options.length = 1;      //区的位置清空
                var city_1number = this.value;    //市的键值编码
                var childData = child[city_1number];   //child  是省的子元素  市

                for (var key in childData.child) {
                    var op = new Option(childData.child[key], key);   //childData.child   区的键值编码
                    qu.appendChild(op);
                }
            }
</script>
</body>
</html>