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>
相关推荐
luvhl 2020-08-17
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
firstboy0 2020-06-14
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04