Dom编程（省、市连级菜单）

来源：互联网发布：js延时函数编辑：程序博客网时间：2024/04/30 06:40

省、市连级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>省、市 连级菜单</title><script type="text/javascript">function selCity(){var arr = [["--请选择城市--"],["海淀区","朝阳区","丰台区"],["石家庄","廊坊市","唐山市"],["太原市","大同市","忻州市"],["广州市","深圳市","东莞市"],["沈阳市","大连市","葫芦岛","锦州市"]];var selNode = document.getElementById("sel");var index  = selNode.selectedIndex;var subselNode = document.getElementById("subsel");subselNode.options.length = 0;/*for(var x=0; x<subselNode.options.length; ){subselNode.removeChild(subselNode.options[x]);}*/var cities = arr[index];for(var x=0; x<cities.length; x++){var optionNode = document.createElement("option");subselNode.appendChild(optionNode);optionNode.innerText = cities[x];}}</script></head><body><select id="sel" onchange="selCity()"><option>--请选择省份--</option><option>北京</option><option>河北</option><option>山西</option><option>广东</option><option>辽宁</option></select><select id="subsel"><option>--请选择城市--</option></select></body></html>

效果：

在第一个下拉式菜单中选择一个省份，后面第二个下拉式菜单自动列出这个省份包含的城市：

总结：

全国那么多省那么多市，如果一个一个写出来的话哪不得写到猴年马月去。

解决方法：首先从百度上把各个省包含些什么市都copy出来，然后利用分隔符给剪开封装成数组。把这个数组保存到一个js文件中以备后用。

0 0

Dom编程（省、市 连级菜单）

省、市 连级菜单

效果：

总结：

Dom编程（省、市连级菜单）

省、市连级菜单