前几天在看js的相关内容，所以就简单写了一个二级联动菜单。分享一下。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JS实现二级联动菜单</title>

 </head>

 <body>

     <form name="form1" method="post" action="">

         省份：<select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select>

         地区：<select name="city" id="city"></select>

     </form>

 </body>

 </html>

 <script type="text/javascript">

     var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];

     var arr_city = [

                     ["请选择城市/地区"],

                     ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],

                     ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],

                     ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],

                     ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],

                     ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],

                     ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']

                 ];

     //网页加载完成，初始化菜单

     window.onload = init;//传入函数地址

     function init(){

         //首先获取对象

         var province = document.form1.province;

         var city = document.form1.city;

         //指定省份中<option>标记的个数

         province.length = arr_province.length;

         //循环将数组中的数据写入<option>标记中

         for(var i=0;i<arr_province.length;i++){

             province.options[i].text = arr_province[i];

             province.options[i].value = arr_province[i];

         }

         //修改省份列表的默认选择项

         var index = 0;

         province.selectedIndex = index;

         //指定城市中<option>标记的个数

         city.length = arr_city[index].length;

         //循环将数组中的数据写入<option>标记中

         for (var j = 0; j<arr_city[index].length;j++) {

             city.options[j].text = arr_city[index][j];

             city.options[j].value = arr_city[index][j];

         }

     }

     function  changeSelect(index){

         //选择对象

         var city = document.form1.city;

         //修改省份列表的选择项

         province.selectedIndex = index;

         //指定城市中<option>标记的个数

         city.length = arr_city[index].length;

         //循环将数组中的数据写入<option>标记中

         for (var j = 0; j<arr_city[index].length;j++) {

             city.options[j].text = arr_city[index][j];

             city.options[j].value = arr_city[index][j];

         }

     }

 </script>

利用JS实现一个简单的二级联动菜单的更多相关文章

  1. 利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. JS简单实现二级联动菜单

    <form method="post" action=""> 省/市:<select id="province" onch ...

  3. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  5. 利用 nodeJS 搭建一个简单的Web服务器（转）

    下面的代码演示如何利用 nodeJS 搭建一个简单的Web服务器: 1. 文件 WebServer.js: //-------------------------------------------- ...

  6. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  7. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  8. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  9. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

随机推荐

  1. MySQL锁(行锁、表锁、页锁、乐观锁、悲观锁等)

    锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具.在计算机中,是协调多个进程或县城并发访问某一资源的一种机制.在数据库当中,除了传统的计算资源(CPU.RAM.I/O等等)的争用之外,数据也是一 ...

  2. python基础学习17----json&pickle&shelve

    json和pickle的功能是对数据进行序列化 将对象转换为可通过网络传输或可以存储到本地磁盘的数据格式(如:XML.JSON或特定格式的字节串)的过程称为序列化:反之,则称为反序列化 json模块 ...

  3. 【转】Java学习---集合框架那些事

    [原文]https://www.toutiao.com/i6593220692525711885/ Arraylist 与 LinkedList 异同 1. 是否保证线程安全: ArrayList 和 ...

  4. [转]Java虚拟机是如何判断变量类型的

    [原文]https://www.toutiao.com/i6591766777745637891/ 概述 众所周知,Java支持平台无关性.安全性和网络移动性.而Java平台由Java虚拟机和Java ...

  5. elasticsearch安装步骤

    今天我们来安装一下elasticsearch,我们采用RPM包安装的方式来,版本为6.5.4.系统为centos7.5版本. 1.首先设置系统环境 1)编辑/etc/sysctl.conf文件添加下面 ...

  6. 一、 JSP概述 二、JSP的语法结构 三、JSP内置对象

    一.JSP概述###<1>概念 java服务器页面 可以编写动态页面 其内部是以HTML标签为主,可以在HTML标签嵌套java代码 jsp文件以.jsp为后缀 jsp本质上就是一个Ser ...

  7. 「2017 山东一轮集训 Day5」字符串

    题目 比较神仙的操作啊 首先先考虑一个串的做法,我们有两种:SA或SAM,其中SAM又有两种,拓扑图上的\(dp\)和\(parent\)上随便统计一下 显然这道题\(SA\)和\(parent\)树 ...

  8. Cobalt Strike深入使用

    System Profiler使用 System Profiler 模块,搜集目标的各类机器信息(操作系统版本,浏览器版本等) Attacks->web drive-by->System ...

  9. 信号处理开源库SP++介绍

    SP++ (Signal Processing in C++) 是一个关于信号处理与数值计算的开源 C++程序库,该库提供了信号处理与数值计算中常用算法的 C++实现.SP++中所有算法都以 C++类 ...

  10. Python2.7-io

    io 模块,用于处理流数据,在 python2 下,是内置 file 对象的另一种选择,在 python3 下,此模块是默认的文件和流数据的接口. 1.模块继承关系 IOBase--RawIOBase ...