基于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 相关文章推荐
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
JS图片懒加载技术实现过程解析
Jul 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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
基于canvas粒子系统的构建详解
2017/08/31 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Python可跨平台实现获取按键的方法
2015/03/05 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
TensorFlow实现创建分类器
2018/02/06 Python
python监控进程脚本
2018/04/12 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python函数和模块的使用总结
2019/05/20 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
夫妻吵架保证书
2015/05/08 职场文书
社区安全温馨提示语
2015/07/14 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
教师节主题班会教案
2015/08/17 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
卖车协议书范文
2016/03/23 职场文书
创业计划书详解
2019/07/19 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python