基于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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
JSON相关知识汇总
Jul 03 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
js实现拖拽功能
Mar 01 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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源代码
2006/10/09 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JavaScript 基本概念
2015/01/20 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
python创建进程fork用法
2015/06/04 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python socket服务常用操作代码实例
2020/06/22 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
学期研究性学习个人的自我评价
2014/01/09 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
文明工地标语
2014/06/16 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Python的三个重要函数详解
2022/01/18 Python
golang为什么要统一错误处理
2022/04/03 Golang