js dom html 写下拉菜单

闲话少说直接上代码
<!DOCTYPE html>//定义文档类型是html
<html>
<head>
    <meta charset="UTF-8">//规定字符编码
    <title>我是下拉菜单</title>
</head>
<body>
<select id="province" name="pro">//select设置下拉菜单
    <option>请选择</option>//option是下拉菜单的可用选项
    <option>河北省</option>
    <option>北京市</option>
    <option>河南省</option>
    <option>山西省</option>
    <option>天津市</option>
</select>
<select id="city" name="pro">
    <option>请选择</option>
</select>
<script type='text/javascript'>//引入脚本
    var pros=document.getElementById("province");//定义变量，根据id获取dom元素
    pros.onchange=function() {//定义onchange事件的方法onchange事件是在域的内容改变时候发生变化
        var city = document.getElementById('city');
        opts = city.getElementsByTagName('option');//根据元素标签名称获取dom元素
        for (var i = opts.length-1; i > 0; i++) {
            city.removeChild(opts[i]);//移除子节点
        }
        var pro = pros.value;
        switch (pro) {//满足条件就执行
            case'河北省':
                cities = ['邯郸市', '邢台市', '石家庄', '保定', '廊坊', '沧州', '衡水', '张家口'];
                break;
            case'北京市':
                cities = ['东城区', '西城区', '朝阳区', '房山区', '大兴区'];
                break;
            case'河南省':
                cities = ['开封市', '郑州市', '平顶山'];
                break;
            case'山西省':
                cities = ['太原市', '吕梁市', '聊城市'];
                break;
            case'请选择':
                cities = '';
                break
        }
        for (var j = 0; j < cities.length; j++) {
            var option = document.createElement("option");//创造新的元素
            var text_node = document.createTextNode(cities[j]);//创造新的文本
            option.appendChild(text_node);//添加子元素
            city.appendChild(option);
        }
    }
</script>

</body>
</html>
js dom html 写下拉菜单

猜你喜欢
