闲话少说直接上代码
<!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>
1756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
