基于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中的location用法简单介绍
Mar 07 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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邮箱地址正则表达式验证
2015/11/13 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
语文教育专业应届生求职信
2013/11/23 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
个人课题方案
2014/05/08 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
放弃继承权公证书
2015/01/23 职场文书
委托书英文
2015/01/28 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
表彰大会新闻稿
2015/07/17 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server