基于javascript实现全国省市二级联动下拉选择菜单

本文实例讲述了js实现全国省市二级联动下拉选择菜单，分享给大家供大家参考。具体如下：
效果图：

具体代码：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript">//好像不是这样子var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];var arr_city = [["请选择城市/地区"],["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],["宝山区","长宁区","丰贤区", "虹口区","黄浦区","青浦区","南汇区","徐汇区","卢湾区"],["和平区", "河西区", "南开区", "河北区", "河东区", "红桥区", "塘古区", "开发区"],["俞中区", "南岸区", "江北区", "沙坪坝区", "九龙坡区", "渝北区", "大渡口区", "北碚区"],["福田区", "罗湖区", "盐田区", "宝安区", "龙岗区", "南山区", "深圳周边"],["广州市","惠州市","汕头市","珠海市","佛山市","中山市","东莞市"],["郑州市"]];//函数：当省份中的option改变时，城市中的数据应该相应的改变function select_change（index）{var city = document.form1.city;//根据当前index确定city中要写入的二维数组是哪一个city.length = 0;city.length = arr_city[index].length;for（var i=0;i<arr_city[index].length;i++）{//创建每一个option对象（option标记）city.options[i].text = arr_city[index][i];city.options[i].value = arr_city[index][i];}}//函数：给province对象添加option对象，每个option的内容来自于arr_provincefunction init（）{//获取province和city对象var province = document.form1.province;var city = document.form1.city;//指定下拉列表的高度，准备写入几个option的标记（很重要）province.length = arr_province.length; //这句必须有//循环数组，将数组内容写入到province中去for（var i=0;i<arr_province.length;i++）{//创建每一个option对象（option标记）province.options[i].text = arr_province[i];province.options[i].value = arr_province[i];}//指定省份当前的默认选中索引号var index = 0;province.selectedIndex = index;//对象city的内容来自于province的选择//我们默认指定一个option，一般是下标为0的那个city.length = arr_city[index].length;for（var j=0;j<arr_city[index].length;j++）{//创建每一个option对象（option标记）city.options[j].text = arr_city[index][j];city.options[j].value = arr_city[index][j];}}</script></head><body onload="init（）"><form name="form1">省份：<select name="province" onchange="select_change（this.selectedIndex）" style="width:130px;"></select>城市：<select name="city"></select></form></body></html>

希望本文所述对大家的javascript程序设计有所帮助。