聊聊如何使用Js写一个简单的二级联动和三级联动呢?

前言:咳咳哈,大佬说:"这不是有手就行了?"好吧,这里不做过多罗里吧嗦,真的不过多吹,我们在下面直接上代码上注释。

 

文章目录:

  1. 原Js二级联动实现
  2. 原Js三级联动实现

 

一、二级联动的实现

第一步

在HTML页面创建两个 select 下拉列表元素,并设置id为 ‘province’和id ‘city’



  
  

第二步

在HTML创建js标签    用于写js代码,当然也可以创建一个js文本写js代码,我这里纯属是想偷懒所以直接在html页面使用script标签里面写,效果一样;

好了,不啰嗦,现在开始写js代码

首先我们要创建 javaScript 对象字面量,它是[object literal]的一种形式;是用来创建包含键值对的对象,可以快速地创建和初始化一个对象,不再需要定义一个构造函数!

    //省市对应数据
    var data = {
        "北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"],
        "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"],
        "广东省": ["深圳市", "广州市", "珠海市", "中山市", "东莞市"]
    };

接下来就是for(var key in data)初始化省份

getElementById("xxx") 获取id

createElement("xxx") 创建一个html元素节点

   //初始化省份
    var province = document.getElementById("province");
    for (var key in data) {
        var option = document.createElement("option");
        option.innerText = key;
        province.appendChild(option);
    }

创建函数获取城市

  //获取城市
    function getCity() {
        var provinceName = province.value;
        var city = document.getElementById("city");
        city.innerHTML = "";
        if (data[provinceName]) {
            for (var i = 0; i < data[provinceName].length; i++) {
                var option = document.createElement("option");
                option.innerText = data[provinceName][i];
                city.appendChild(option);
            }
        }
    }

写到这里,二级联动也就写完了,当然还有其他写法也可以同样做到这样的效果,在这里也就不一一演示了。

 

二、三级联动的实现

三级联动的实现要比二级联动实现复杂了一点点,但是,并不算难!

第一

老套路,和上面二级联动一样,先在HTML创建三个  下拉列表

  
 
    


    

第二

和上面一样在html创建

你可能感兴趣的:(html,前端,javascript)