js省市级联 三级联动菜单
直接粘贴先来，保存为HTML格式的即可。
------------------从此粘贴源码------------
<html>
<head>
<title>省市级联</title>
</head>
<body>
<script language="javascript">
/*
实现省市级联效果
*/
var provinces={
四川省:["成都市",
"自贡市",
"攀枝花市",
"泸州市",
"德阳市",
"绵阳市",
"广元市",
"遂宁市",
"内江市",
"乐山市",
"南充市",
"眉山市",
"宜宾市",
"广安市",
"达州市",
"雅安市",
"巴中市",
"资阳市",
"阿坝藏族羌族自治州",
"甘孜藏族自治州",
"凉山彝族自治州"],
山西省:["太原市",
"大同市",
"阳泉市",
"长治市",
"晋城市",
"朔州市",
"晋中市",
"运城市",
"忻州市",
"临汾市",
"吕梁市"],
内蒙古:["呼和浩特市",
"包头市",
"乌海市",
"赤峰市",
"通辽市",
"鄂尔多斯市",
"呼伦贝尔市",
"巴彦淖尔市",
"乌兰察布市",
"兴安盟",
"锡林郭勒盟",
"阿拉善盟"],
辽宁省:["沈阳市",
"大连市",
"鞍山市",
"抚顺市",
"本溪市",
"丹东市",
"锦州市",
"营口市",
"阜新市",
"辽阳市",
"盘锦市",
"铁岭市",
"朝阳市",
"葫芦岛市"],
吉林省:["长春市",
"吉林市",
"四平市",
"辽源市",
"通化市",
"白山市",
"松原市",
"白城市",
"延边朝鲜族自治州"],
黑龙江省:["哈尔滨市",
"齐齐哈尔市",
"鸡西市",
"鹤岗市",
"双鸭山市",
"大庆市",
"伊春市",
"佳木斯市",
"七台河市",
"牡丹江市",
"黑河市",
"绥化市",
"大兴安岭地区"],
上海:["上海"],
江苏省:["南京市",
"无锡市",
"徐州市",
"常州市",
"苏州市",
"南通市",
"连云港市",
"淮安市",
"盐城市",
"扬州市",
"镇江市",
"泰州市",
"宿迁市"],
浙江省:["杭州市",
"宁波市",
"温州市",
"嘉兴市",
"湖州市",
"绍兴市",
"金华市",
"衢州市",
"舟山市",
"台州市",
"丽水市"],
安徽省:["合肥市",
"芜湖市",
"蚌埠市",
"淮南市",
"马鞍山市",
"淮北市",
"铜陵市",
"安庆市",
"黄山市",
"滁州市",
"阜阳市",
"宿州市",
"巢湖市",
"六安市",
"亳州市",
"池州市",
"宣城市"],
福建省:["福州市",
"厦门市",
"莆田市",
"三明市",
"泉州市",
"漳州市",
"南平市",
"龙岩市",
"宁德市"],
江西省:["南昌市",
"景德镇市",
"萍乡市",
"九江市",
"新余市",
"鹰潭市",
"赣州市",
"吉安市",
"宜春市",
"抚州市",
"上饶市"],
山东省:["济南市",
"青岛市",
"淄博市",
"枣庄市",
"东营市",
"烟台市",
"潍坊市",
"济宁市",
"泰安市",
"威海市",
"日照市",
"莱芜市",
"临沂市",
"德州市",
"聊城市",
"滨州市",
"菏泽市"],
河南省:["郑州市",
"开封市",
"洛阳市",
"平顶山市",
"安阳市",
"鹤壁市",
"新乡市",
"焦作市",
"濮阳市",
"许昌市",
"漯河市",
"三门峡市",
"南阳市",
"商丘市",
"信阳市",
"周口市",
"驻马店市"],
湖北省:["武汉市",
"黄石市",
"十堰市",
"宜昌市",
"襄樊市",
"鄂州市",
"荆门市",
"孝感市",
"荆州市",
"黄冈市",
"咸宁市",
"随州市",
"恩施土家族苗族自治州"],
湖南省:["长沙市",
"株洲市",
"湘潭市",
"衡阳市",
"邵阳市",
"岳阳市",
"常德市",
"张家界市",
"益阳市",
"郴州市",
"永州市",
"怀化市",
"娄底市",
"湘西土家族苗族自治州"],
广东省:["广州市",
"韶关市",
"深圳市",
"珠海市",
"汕头市",
"佛山市",
"江门市",
"湛江市",
"茂名市",
"肇庆市",
"惠州市",
"梅州市",
"汕尾市",
"河源市",
"阳江市",
"清远市",
"东莞市",
"中山市",
"潮州市",
"揭阳市",
"云浮市"],
广西省:["南宁市",
"柳州市",
"桂林市",
"梧州市",
"北海市",
"防城港市",
"钦州市",
"贵港市",
"玉林市",
"百色市",
"贺州市",
"河池市",
"来宾市",
"崇左市"],
海南省:["海口市",
"三亚市"],
重庆市:["重庆"],
贵州省:["贵阳市",
"六盘水市",
"遵义市",
"安顺市",
"铜仁地区",
"黔西南布依族苗族自治州",
"毕节地区",
"黔东南苗族侗族自治州",
"黔南布依族苗族自治州"],
云南省:["昆明市",
"曲靖市",
"玉溪市",
"保山市",
"昭通市",
"丽江市",
"思茅市",
"临沧市",
"楚雄彝族自治州",
"红河哈尼族彝族自治州",
"文山壮族苗族自治州",
"西双版纳傣族自治州",
"大理白族自治州",
"德宏傣族景颇族自治州",
"怒江傈僳族自治州",
"迪庆藏族自治州"],
西藏自治区:["拉萨市",
"昌都地区",
"山南地区",
"日喀则地区",
"那曲地区",
"阿里地区",
"林芝地区"],
陕西省:["西安市",
"铜川市",
"宝鸡市",
"咸阳市",
"渭南市",
"延安市",
"汉中市",
"榆林市",
"安康市",
"商洛市"],
甘肃省:["兰州市",
"嘉峪关市",
"金昌市",
"白银市",
"天水市",
"武威市",
"张掖市",
"平凉市",
"酒泉市",
"庆阳市",
"定西市",
"陇南市",
"临夏回族自治州",
"甘南藏族自治州"],
青海省:["西宁市",
"海东地区",
"海北藏族自治州",
"黄南藏族自治州",
"海南藏族自治州",
"果洛藏族自治州",
"玉树藏族自治州",
"海西蒙古族藏族自治州"],
宁夏自治区:["银川市",
"石嘴山市",
"吴忠市",
"固原市",
"中卫市"],
新疆自治区:["乌鲁木齐市",
"克拉玛依市",
"吐鲁番地区",
"哈密地区",
"昌吉回族自治州",
"博尔塔拉蒙古自治州",
"巴音郭楞蒙古自治州",
"阿克苏地区",
"克孜勒苏柯尔克孜自治州",
"喀什地区",
"和田地区",
"伊犁哈萨克自治州",
"塔城地区",
"阿勒泰地区"],
台湾省:["台北市"],
香港特区:["香港"],
澳门特区:["澳门"]};
//加载省
function loadProvince()
{
//获得省所对应的列表框对象
var pro=document.getElementById("province");
//从数组中提取省份信息
for(var p in provinces)
{
//创建option元素
var opt=document.createElement("option");
//设置option元素中的信息
opt.innerText=p;
opt.value=p;
//将option元素添加到select元素中(option是select的子节点)
pro.appendChild(opt);
}
}
//加载市
function loadCity()
{
//获得用户的省份
var selectProvince=document.getElementById("province").value;
//根据省获得市(citys是一个数组)
var citys=provinces[selectProvince];
//获得市所对应的列表框对象
var city=document.getElementById("city");
//将元素列表框中的元素全部清空
city.innerText="";
var opt=document.createElement("option");
opt.innerText="--请选择城市--";
opt.value="0";
city.appendChild(opt);
for(var index=0;index<citys.length;index++)
{
opt=document.createElement("option");
opt.innerText=citys[index];
opt.value=citys[index];
city.appendChild(opt);
}
}
//在窗口加载时添加省份信息
window.onload=loadProvince;
</script>
<select id="province" onchange="loadCity();">
<option value="0">--请选择省份--</option>
</select>
<select id="city">
<option value="0">--请选择城市--</option>
</select>
</body>
</html>
---------------------粘贴到此即可-----------------------------
第二个：
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>一个经典的下拉框三级联动，并链接到相应站点</TITLE>
</HEAD>
<BODY >
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>-------省份---------</option>
<option>四川省</option>
<option>北京市</option>
<option>河北省</option>
<option>山西省</option>
<option>内蒙古自治区</option>
<option>辽宁省</option>
<option>吉林省</option>
<option>黑龙江省</option>
<option>上海市</option>
<option>江苏省</option>
<option>浙江省</option>
<option>安徽省</option>
<option>福建省</option>
<option>江西省</option>
<option>山东省</option>
<option>河南省</option>
<option>湖北省</option>
<option>湖南省</option>
<option>广东省</option>
<option>广西壮族自治区</option>
<option>海南省</option>
<option>重庆市</option>
<option>贵州省</option>
<option>云南省</option>
<option>西藏自治区</option>
<option>陕西省</option>
<option>甘肃省</option>
<option>青海省</option>
<option>宁夏回族自治区</option>
<option>新疆维吾尔自治区</option>
<option>香港非凡行政区</option>
<option>澳门非凡行政区</option>
<option>台湾省</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<script>
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("---Select2---"," ");
group[1][0]=new Option("成都"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");
group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116");
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---","");
secondGroup[1][0][1]=new Option("成都","http://tianqi.52huwai.com/sichuan/chengdu/chengdu/index.php");
secondGroup[1][0][2]=new Option("新都"," ");
secondGroup[1][0][3]=new Option("温江"," ");
secondGroup[1][0][4]=new Option("金堂"," ");
secondGroup[1][0][5]=new Option("双流"," ");
secondGroup[1][0][6]=new Option("郫县"," ");
secondGroup[1][0][7]=new Option("浦江"," ");
secondGroup[1][0][8]=new Option("新津"," ");
secondGroup[1][0][9]=new Option("都江堰"," ");
secondGroup[1][0][10]=new Option("彭州"," ");
secondGroup[1][0][11]=new Option("邛崃"," ");
secondGroup[1][0][12]=new Option("崇州"," ");
secondGroup[1][0][13]=new Option("崇庆"," ");
secondGroup[1][0][14]=new Option("彭县"," ");
secondGroup[1][0][14]=new Option("龙泉驿","http://tianqi.52huwai.com/sichuan/chengdu/longquanyi/index.php");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract.com");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");
secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");
secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");
secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.news.com");
secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(z){
window.location=temp1[z].value
}
</script>
</td>
</tr>
</table>
</FORM>
</BODY></HTML>
