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


Posted in Javascript onJanuary 28, 2016

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

效果图:

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

具体代码:

<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_province
function 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程序设计有所帮助。

Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
Nuxt.js实战详解
Jan 18 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 #Javascript
封装属于自己的JS组件
Jan 27 #Javascript
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python查询mysql中文乱码问题
2014/11/09 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
中专自我鉴定范文
2013/10/16 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
幼儿学前班评语
2014/12/29 职场文书
秋收起义观后感
2015/06/11 职场文书
企业培训简报范文
2015/07/20 职场文书
2015年征兵工作总结
2015/07/23 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技