利用JS实现一个简单的二级联动菜单
前几天在看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实现一个简单的二级联动菜单的更多相关文章
- 利用js编写一个简单的html表单验证,验证通过时提交数据(附源码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JS简单实现二级联动菜单
<form method="post" action=""> 省/市:<select id="province" onch ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 利用 nodeJS 搭建一个简单的Web服务器(转)
下面的代码演示如何利用 nodeJS 搭建一个简单的Web服务器: 1. 文件 WebServer.js: //-------------------------------------------- ...
- 利用ANTLR4实现一个简单的四则运算计算器
利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- php+js实现一个简单的用户管理系统
php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...
随机推荐
- 红帽7中firewall常用指令
1.端口管理 (1)列出DMZ区域开放的端口 ~]#firewall-cmd --zone=dmz --list-ports (2)8080端口加入dmz区 ~]#firewall-cmd --zon ...
- percona pt toolkit 总结
##=====================================================##pt-osc之工作流程:1.检查更改表是否有主键或唯一索引,是否有触发器2.检查修改表 ...
- 500.19 ,错误:4.00x80070005
直接把网站根目录添加上everyone权限即可
- Tmux 使用教程 on Fedora 28
Tmux 和 gun/screen 都是优秀的终端复用软件,它的关键的好处就是,保持ssh 登录连接session不中断,并且能支持分屏操作,具备丰富的命令行参数,可以进行动态布局和操作.可以看作为s ...
- C/C++控制Windows关机/注销/重启的正确姿势
简介 说到代码控制Windows关机/注销/重启的方式,有很多种,最简单的不过就是控制命令行,使用system("pause")函数执行一个shutdown -s -t 0,关机就 ...
- C#程序如何捕捉未try/catch的异常——不弹“XXX已停止工作”报错框
诚意满满直接上代码: static void Main(string[] args) { //Main函数中增加此句 AppDomain.CurrentDomain.UnhandledExceptio ...
- C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”
重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...
- Sqlite的安装和简单使用
Sqlite 1 安装 首先,下载相应的版本: https://sqlite.org/download.html 其次,解压到本地,并添加到环境变量. 然后,打开 CMD 创建,输入 sqlite3 ...
- 如何用IDEA http://localhost:8080/不带上项目名访问
IDEA TOMCAT设置中把这里的项目名去掉即可
- java读写properties配置文件不改变属性的顺序和注释
先贴代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStream; import java ...