需求:实现一个简单的地址关联下拉选择框。
1、通过id拿到select标签
var city = document.getElementById("city");
2、定义一个select.onchange匿名函数
3、定义一个变量获取select标签里面的value
var cy = city.value;
4、通过switch循环判断这个变量cy是哪个值,进而进行相应的html代码替换。
document.getElementById("area").innerHTML = "<option>xxx</option>"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <select id="city"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="sh">上海</option> </select> <select id="area"> <option>海淀</option> <option>朝阳</option> <option>东城</option> </select> </body> <script type="text/javascript"> var city = document.getElementById("city"); city.onchange = function(){ var cy = city.value; switch (cy) { case "bj": var area = document.getElementById("area"); area.innerHTML = "<option>海淀</option><option>朝阳</option><option>朝阳</option>"; break; case "sh": var area = document.getElementById("area"); area.innerHTML = "<option>浦东</option><option>杨浦</option><option>浦西</option>"; break; case "tj": var area = document.getElementById("area"); area.innerHTML = "<option>河西</option><option>安华</option><option>普洗</option>"; break; default: alert("error"); } } </script> </html>