javascript + xml 实现全国省市级联动菜单
一、将如下代码保存为html文件。
<script language="JavaScript">
var xmldom=new ActiveXObject("Microsoft.XMLDOM");
var province=[];
var cities=[];
function init(){
xmldom.async=true;
xmldom.onreadystatechange=statInit;
window.setTimeout(function(){xmldom.load("city.xml");},10);
}
function statInit(){
if(xmldom.readyState==4){
if( xmldom == null || xmldom.documentElement == null) {
alert("XML文件不存在或没有菜单项");
return ;
}
createProvince();
}
}
function createProvince(){
var provinces=xmldom.getElementsByTagName("province");
delitem(document.all.province);
delitem(document.all.city);
for (var i=0;i<provinces.length;i++){
province[i]=provinces[i].getAttribute("name");
cities[i]=provinces[i].getAttribute("cities");
document.all.province.add(window.Option(province[i],province[i]));
}
provinceChange(0);
}
function provinceChange(index){
var city=cities[index].split(" ");
delitem(document.all.city);
for (var i=0;i<city.length;i++){
document.all.city.add(window.Option(city[i],city[i]));
}
}
function delitem(options){
optioncount=options.length;
for(i=optioncount-1;i>=0;i--){
options.options[i] = null
}
}
</script>
<body onLoad="init()">
<select name="province" onChange="provinceChange(this.selectedIndex)">
</select>
<select name="city">
</select>
</body>
二、将如下代码保存成city.xml文件。
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE china [
<!ELEMENT province EMPTY>
<!ELEMENT china (province*)>
<!ATTLIST province name NMTOKEN #REQUIRED>
<!ATTLIST province cities NMTOKENS #REQUIRED>
]>
<china>
<province name="全选" cities="全选"/>
<province name="安徽" cities="全选 安庆 蚌埠 巢湖 池州 滁州 阜阳 合肥 淮北 淮南 黄山 六安 马鞍山 宿州 铜陵 芜湖 宣城 亳州"/>
<province name="北京" cities="全选 北京"/>
<province name="福建" cities="全选 福州 龙岩 南平 宁德 莆田 泉州 三明 厦门 漳州"/>
<province name="甘肃" cities="全选 白银 定西 甘南藏族自治州 嘉峪关 金昌 酒泉 兰州 临夏回族自治州 陇南 平凉 庆阳 天水 武威 张掖"/>
<province name="广东" cities="全选 潮州 东莞 佛山 广州 河源 惠州 江门 揭阳 茂名 梅州 清远 汕头 汕尾 韶关 深圳 阳江 云浮 湛江 肇庆 中山 珠海"/>
<province name="广西" cities="全选 百色 北海 崇左 防城港 桂林 贵港 河池 贺州 来宾 柳州 南宁 钦州 梧州 玉林"/>
<province name="贵州" cities="全选 安顺 毕节 贵阳 六盘水 黔东南苗族侗族自治州 黔南布依族苗族自治州 黔西南布依族苗族自治州 铜仁 遵义"/>
<province name="海南" cities="全选 白沙黎族自治县 保亭黎族苗族自治县 昌江黎族自治县 澄迈县 定安县 东方 海口 乐东黎族自治县 临高县 陵水黎族自治县 琼海 琼中黎族苗族自治县 三亚 屯昌县 万宁 文昌 五指山 儋州"/>
<province name="河北" cities="全选 保定 沧州 承德 邯郸 衡水 廊坊 秦皇岛 石家庄 唐山 邢台 张家口"/>
<province name="河南" cities="全选 安阳 鹤壁 济源 焦作 开封 洛阳 南阳 平顶山 三门峡 商丘 新乡 信阳 许昌 郑州 周口 驻马店 漯河 濮阳"/>
<province name="黑龙江" cities="全选 大庆 大兴安岭 哈尔滨 鹤岗 黑河 鸡西 佳木斯 牡丹江 七台河 齐齐哈尔 双鸭山 绥化 伊春"/>
<province name="湖北" cities="全选 鄂州 恩施土家族苗族自治州 黄冈 黄石 荆门 荆州 潜江 神农架林区 十堰 随州 天门 武汉 仙桃 咸宁 襄樊 孝感 宜昌"/>
<province name="湖南" cities="全选 常德 长沙 郴州 衡阳 怀化 娄底 邵阳 湘潭 湘西土家族苗族自治州 益阳 永州 岳阳 张家界 株洲"/>
<province name="吉林" cities="全选 白城 白山 长春 吉林 辽源 四平 松原 通化 延边朝鲜族自治州"/>
<province name="江苏" cities="全选 常州 淮安 连云港 南京 南通 苏州 宿迁 泰州 无锡 徐州 盐城 扬州 镇江"/>
<province name="江西" cities="全选 抚州 赣州 吉安 景德镇 九江 南昌 萍乡 上饶 新余 宜春 鹰潭"/>
<province name="辽宁" cities="全选 鞍山 本溪 朝阳 大连 丹东 抚顺 阜新 葫芦岛 锦州 辽阳 盘锦 沈阳 铁岭 营口"/>
<province name="内蒙古" cities="全选 阿拉善盟 巴彦淖尔盟 包头 赤峰 鄂尔多斯 呼和浩特 呼伦贝尔 通辽 乌海 乌兰察布盟 锡林郭勒盟 兴安盟"/>
<province name="宁夏" cities="全选 固原 石嘴山 吴忠 银川"/>
<province name="青海" cities="全选 果洛藏族自治州 海北藏族自治州 海东 海南藏族自治州 海西蒙古族藏族自治州 黄南藏族自治州 西宁 玉树藏族自治州"/>
<province name="山东" cities="全选 滨州 德州 东营 菏泽 济南 济宁 莱芜 聊城 临沂 青岛 日照 泰安 威海 潍坊 烟台 枣庄 淄博"/>
<province name="山西" cities="全选 长治 大同 晋城 晋中 临汾 吕梁 朔州 太原 忻州 阳泉 运城"/>
<province name="陕西" cities="全选 安康 宝鸡 汉中 商洛 铜川 渭南 西安 咸阳 延安 榆林"/>
<province name="上海" cities="全选 上海"/>
<province name="四川" cities="全选 阿坝藏族羌族自治州 巴中 成都 达州 德阳 甘孜藏族自治州 广安 广元 乐山 凉山彝族自治州 眉山 绵阳 南充 内江 攀枝花 遂宁 雅安 宜宾 资阳 自贡 泸州"/>
<province name="天津" cities="全选 天津"/>
<province name="西藏" cities="全选 阿里 昌都 拉萨 林芝 那曲 日喀则 山南"/>
<province name="新疆" cities="全选 阿克苏 阿拉尔 巴音郭楞蒙古自治州 博尔塔拉蒙古自治州 昌吉回族自治州 哈密 和田 喀什 克拉玛依 克孜勒苏柯尔克孜自治州 石河子 图木舒克 吐鲁番 乌鲁木齐 五家渠 伊犁哈萨克自治州"/>
<province name="云南" cities="全选 保山 楚雄彝族自治州 大理白族自治州 德宏傣族景颇族自治州 迪庆藏族自治州 红河哈尼族彝族自治州 昆明 丽江 临沧 怒江傈傈族自治州 曲靖 思茅 文山壮族苗族自治州 西双版纳傣族自治州 玉溪 昭通"/>
<province name="浙江" cities="全选 杭州 湖州 嘉兴 金华 丽水 宁波 绍兴 台州 温州 舟山 衢州"/>
<province name="重庆" cities="全选 重庆"/>
</china>
将html文件和xml文件放同一文件夹下，即可使用。
扫一扫
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
