使用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="data:images/4.jpg" />
</body>
使用Javascript来实现二级联动菜单的效果的更多相关文章
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- mobiscroll实现二级联动菜单
mobiscroll是一款非常使用的移动端选择控件,一般用来日期时间的选择的多,其实从官网上可以看到它有很多方面的使用,这里就不一一介绍了,有兴趣可以去官网上查阅一下 https://demo.mob ...
- 使用javascript中读取Xml文件做成的一个二级联动菜单
[html] view plaincopy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- angular二级联动菜单
<!doctype html> <html lang="en" ng-app='App'> <head> <meta charset=&q ...
- JS简单实现二级联动菜单
<form method="post" action=""> 省/市:<select id="province" onch ...
- 【JavaWeb】实现二级联动菜单
实现效果 频道信息 package demo; public class Channel { private String code; //频道编码 private String name; //频道 ...
- 一个asp+ACCESS省市二级联动菜单程序
<%dim conndim connstron error resume nextconnstr="DBQ="+server.MapPath("test.mdb&q ...
- JQuery EasyUI Combobox 实现省市二级联动菜单
//编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...
随机推荐
- 模拟搭建Web项目的真实运行环境（七）
下面这个是mongo驱动的小案例,里面也有涉及到一点redis的操作 https://github.com/SuperRocky/MyMongoDriver 接下来通过几张图片主要介绍一下每个文件的具 ...
- Lintcode 166. 主元素
----------------------------------- Moore's voting algorithm算法:从一个集合中找出出现次数半数以上的元素,每次从集合中去掉一对不同的数,当剩 ...
- tp框架之模板继承
模板继承是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区 ...
- 关于安装CentOS 7 的注意事项
1.安装VMware Workstation 2.安装CentOS的时候选择GNOME桌面 3.联网设置, VMWare Network Apapter VMnet8 设置IP4 自动获取IP地址,“ ...
- win7（x64）下安装cocos2d并编译安卓项目
好吧,不为啥,就是如题. win7 x64 脑袋内存比较小,说不定明儿就忘了,今天记录一下. 没有什么经验,所有步骤基本都是百度出来的,这里边操作边记录,为了保护原创作者,这里我都附上我查找的链接. ...
- Shell_1 简介
1 Shell 变量 只读变量 使用 readonly 命令可以将变量定义为只读变量,只读变量的值不能被改变. #!/bin/bash -x varName="AAA" echo ...
- 转：学习笔记： Delphi之线程类TThread
学习笔记: Delphi之线程类TThread - 5207 - 博客园http://www.cnblogs.com/5207/p/4426074.html 新的公司接手的第一份工作就是一个多线程计算 ...
- IntelliJ IDEA 绝对好用快捷键
最近根据自己的使用习惯整理了一下在windows下常用的一些快捷键,有些确实非常实用. 常用快捷键 键 作用 备注 Ctrl+F12 显示当前类的所有方法 F2 定位下一个错误位置 Alt ...
- Maven 配置远程仓库
最近要用到一个包:spark-1.6.0-cdh5.8.2,在https://mvnrepository.com网站上搜到该包的pom.xml语句.但是看到下面有这样一句话: 该包在图中所述repos ...
- 提交数据url太长导致提交失败
使用了dojo开发.在datagrid过滤的时候.为了让过滤好处理,直接设置为完全二叉树的方式来存查询条件.但是在提交数据的时候,默认是get?url的方式.结果导致条件选择一两个,url会特别长.然 ...