change事件实现下拉框（解释详细）

1.代码运行结果

一开始默认情况：
在这里插入图片描述
之后选择省份：后边下拉框的城市会随之改变。

2.代码及解释

详细解释，以及各标签以及事件与标签之间的关系在代码下方。

<!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>
</head>
<body>
    <!--省份的下拉框-->
    <select name="省份" id="hid">
        <option value="">请选择</option>
        <option value="1">河北</option>
        <option value="2">北京</option>
        <option value="3">天津</option>
    </select>
    <!--城市的下拉框-->
    <select name="城市" id="mid"></select>
</body>
<script>
    //定义一个新的数组，存储城市
    var data = new Array;
    data[1] = ["保定","石家庄","邢台"];
    data[2] = ["海淀区","朝阳区","长安区"];
    data[3] = [ "河西区","河北区","河东区"];
    //获取省份标签对象
    var hid = document.getElementById("hid");
    //获取城市标签对象
    var mid = document.getElementById("mid");
    //绑定change事件
    hid.onchange = function(){
        //获取下拉框的值，当点击某个省份时所传输下来的值
        var x = this.value;
        //清空之前的操作，如果不写着一行代码，每点击一次省份，城市会叠加，即显示多个省份的城市
        mid.length = 0;
        //判断，当hid对象不是“”的时候，即选择了省份
        if(hid !=""){
            //满足条件遍历data[x]，并通过select里的add方法向下拉框中添加选项，这里data是一个二维数组，x为省份，i为城市
            for(var i = 0;i<data[x].length;i++){
                mid.add(new Option(data[x][i],i));
            }
        }
    }
</script>
</html>

用到的标签及事件，以及它们之间的关系：
select：下拉框标签

向select中添加选项时用到option标签。

通过id获取当前文件的标签对象：document代表当前文件，getElementById（）通过id内容获取元素，两个合并起来的作用document.getElementById（）获取当前文件的元素并返回一个对象。

为什么将hid标签对象绑定change事件？

select的事件句柄（简单的理解为触发条件）为onchange，也就是当选择省份时，触发一个函数，函数的功能就是：向城市的下拉框添加城市

select里的add方法添加的选项应是option元素，类似在body体里直接添加选项。（便于记忆）
add方法：add（option，before），如果before为null，则默认为添加的时候，在后面添加。
option(label,value):label是显示的文字，value是实际值