基于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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python 调用Java实例详解
2017/06/02 Python
python数据化运营的重要意义
2019/11/25 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
化学教育专业求职信
2014/07/08 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年领班工作总结
2015/04/29 职场文书
党支部对转正的意见
2015/06/02 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers