基于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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
js仿微博动态栏功能
Feb 22 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js Date概念详细介绍
2013/11/22 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
求职信写作要突出重点
2014/01/01 职场文书
白酒市场开发计划书
2014/01/09 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
人力资源主管职责范本
2014/03/05 职场文书
培训班主持词
2014/03/28 职场文书
大型公益活动策划方案
2014/08/20 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
旷课检讨书
2015/01/26 职场文书
电影圆明园观后感
2015/06/03 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers