基于Javascript实现二级联动菜单效果


Posted in Javascript onMarch 04, 2016

本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下

效果图如下:

基于Javascript实现二级联动菜单效果

具体实现步骤如下:
1.所用js代码如下:

<script type="text/javascript">
var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"];
var arr_city=[
  ["请选择城市/地区"],
  ["中关村","海淀区","朝阳区","昌平区","丰台区","大兴区"],
  ["宝坻区","浦东新区","长宁区","徐汇区","虹口区","宝山区"],
  ["和平区","河东区","河西区","塘沽区","大港区","北辰区"],
  ["郑州市","洛阳市","商丘市","开封市","安阳市","濮阳市"],
  ["济南市","青岛市","烟台市","德州市"],
  ["石家庄","菏泽市","唐山市"],
  ];
function init()
{
 var province=document.form1.province;
 province.style.width=150+"px";
 var city=document.form1.city;
 city.style.width=150+"px";
 //给province赋值高度,才能在其里面写入内容
 province.length=arr_province.length;
 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;
 //给city赋值高度,才能在其里面写入内容
 city.length=arr_city[index].length;
 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 select_change(num)
{
 var city=document.form1.city;
 city.length=0;
 city.length=arr_city[num].length;
 for(var i=0; i<arr_city[num].length;i++)
 {
 city.options[i].text=arr_city[num][i];
 city.options[i].value=arr_city[num][i];
 }
}
</script>

2.body中的代码如下:

<body onload="init()">
 <form name="form1">
 所在地区:<select name="province" onchange="select_change(this.selectedIndex)"></select>
 城市:<select name="city"></select>
 </form>
</body>

第二个效果:
1.利用javascript来实现鼠标经过图片放大,鼠标移出图片恢复的效果,具体代码如下:

<script type="text/javascript">
function init()
{
 var img0=document.getElementById("img0");
 img0.onmouseover=function()
  {
  img0.style.width=img0.offsetWidth*1.5+"px"
  }
 img0.onmouseout=function()
  {
  img0.style.width=img0.offsetWidth/1.5+"px"
  }
}
</script>

2.body中的代码如下:

<body onload="init()">
<img id="img0" src="images/4.jpg" />
</body>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
vuejs指令详解
2017/02/07 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
前端性能优化建议
2020/09/17 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
简单了解python中的与或非运算
2019/09/18 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python requests上传文件实现步骤
2020/09/15 Python
python 高阶函数简单介绍
2021/02/19 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
求职自荐信的格式
2014/04/07 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
检讨书范文大全
2015/05/07 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
用python批量解压带密码的压缩包
2021/05/31 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技