基于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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
关于vue-router路径计算问题
May 10 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JS实现520 表白简单代码
May 21 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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
My Desktop :) 桌面式代码
2008/12/29 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Django 框架模型操作入门教程
2019/11/05 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
Why we need EJB
2016/10/20 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
最新教师自我评价分享
2013/11/12 职场文书
学术会议欢迎词
2014/01/09 职场文书
网络编辑职责
2014/03/01 职场文书
实践单位评语
2014/04/26 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
体育运动会广播稿
2014/10/05 职场文书
社团招新宣传语
2015/07/13 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python