效果要求：

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。

当点击第一级下拉菜单，第二级菜单的内容会自动匹配；

选择第二级菜单时，第三级菜单会自动生成。

当我取消上一级菜单的选项时，次一级选项会自动消失。

实现原理：

首先创建一个数组存放省级option

再创建一个sheng.onchange响应函数，当省级下拉菜单的value发生改变时，发生市级和区级下拉菜单的变动

创建一个对象objSheng，对象的属性是省级的名称，属性的内容是一个数组，数组的内容是对应省的市级，下列市级的下拉菜单发生变动时，区级同理

在sheng.onchange响应函数中，设置for循环，利用if判断和Object.keys(objSheng)[i]判断省级下拉菜单的value是不是对象objSheng的属性，如果是的话，再创建option标签，并且把option的内容和value值设置成objSheng[Object.keys(objSheng)[i]

代码展示：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="container">
    <select name="" id="sheng">
        <option value=""selected disabled>请选择</option>        
    </select>省
    
    <select name="" id="shi">
        <option value=""selected disabled>请选择</option>  
    </select>市
    
    <select name="" id="qu">
        <option value=""selected disabled>请选择</option>  
    </select>区
    </div>

    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

select{
    min-width: 100px;
}

option{
    display: inline-block;
    min-width: 100px;
}

button{
    width: 50px;
    height: 50px;
    margin-top: 50px;
}

js

// 获取元素节点
var sheng = document.getElementById("sheng")
var shi = document.getElementById("shi")
var qu = document.getElementById("qu")

// 创建一个省级option的数组
var arrSheng = ["福建省", "江苏省"]

// 将省级数组的内容输入到省级的select下
for (let i = 0; i < arrSheng.length; i++) {
    var option = document.createElement("option")
    option.innerHTML = arrSheng[i]
    option.value = arrSheng[i]
    sheng.appendChild(option)
}

// 创建一个对象控制市级和区级
var objSheng = {
    "福建省": ["福州市", "厦门市", "泉州市", "等等"],
    "江苏省": ["南京市", "苏州市", "扬州市", "等等"]
}

var objShi = {
    "福州市": ["鼓楼区", "台江区", "等等"],
    "厦门市": ["思明区", "湖里区", "等等"],
    "泉州市": ["鲤城区", "丰泽区", "等等"],
    "南京市": ["玄武区", "秦淮区", "等等"],
    "苏州市": ["虎丘区", "吴中区", "等等"],
    "扬州市": ["广陵区", "邗江区", "等等"],
}

sheng.onchange = function () {
    // 改变省级时候，清除市级和区级的内容
    shi.innerHTML = "<option value=''selected disabled>请选择</option>"
    qu.innerHTML = "<option value=''selected disabled>请选择</option>"
    // 定义循环判断省级的value
    for (let i = 0; i < Object.keys(objSheng).length; i++) {
        if (sheng.value == Object.keys(objSheng)[i]) {
            // 创建数组保存(Object.keys(objSheng)[i])简化代码
            var arr = objSheng[Object.keys(objSheng)[i]]
            
            for (let j = 0; j < arr.length; j++) {
                var option = document.createElement("option")
                option.innerHTML = arr[j]
                option.value = arr[j]
                shi.appendChild(option)
            }
        }
    }
}

shi.onchange = function () {
    // 改变省级时候，清除区级的内容
    qu.innerHTML = "<option value=''selected disabled>请选择</option>"
    // 定义循环判断市级value
    for (let i = 0; i < Object.keys(objShi).length; i++) {
        if (shi.value == Object.keys(objShi)[i]) {
            // 创建数组保存(Object.keys(objShi)[i])简化代码
            var arr = objShi[Object.keys(objShi)[i]]
            
            for (let j = 0; j < arr.length; j++) {
                console.log(arr[j])
                var option = document.createElement("option")
                option.innerHTML = arr[j]
                option.value = arr[j]
                qu.appendChild(option)
            }
        }
    }
}

效果展示：


省市区三级联动