您的位置：首页 > Web前端 > JavaScript

js实现省市级联

2012-06-26 09:16 369 查看

来自http://www.cnblogs.com/xiachufeng/archive/2010/07/27/1785902.html

直接粘贴先来，保存为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()

{

//获得用户的省份http://blog.csdn.net/shanzhizi

var selectProvince=document.getElementById("province").value;

//根据省获得市(citys是一个数组)

var citys=provinces[selectProvince];

//获得市所对应的列表框对象baojian123.in

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： redirect function cgi javascript resources website

相关文章推荐

新的分享

章节导航