效果图如下：

具体实现步骤如下：

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来实现二级联动菜单的效果的更多相关文章

  1. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  2. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  3. mobiscroll实现二级联动菜单

    mobiscroll是一款非常使用的移动端选择控件,一般用来日期时间的选择的多,其实从官网上可以看到它有很多方面的使用,这里就不一一介绍了,有兴趣可以去官网上查阅一下 https://demo.mob ...

  4. 使用javascript中读取Xml文件做成的一个二级联动菜单

    [html] view plaincopy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  5. angular二级联动菜单

    <!doctype html> <html lang="en" ng-app='App'> <head> <meta charset=&q ...

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

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

  7. 【JavaWeb】实现二级联动菜单

    实现效果 频道信息 package demo; public class Channel { private String code; //频道编码 private String name; //频道 ...

  8. 一个asp+ACCESS省市二级联动菜单程序

    <%dim conndim connstron error resume nextconnstr="DBQ="+server.MapPath("test.mdb&q ...

  9. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

随机推荐

  1. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. vue2.0环境搭建

    1.安装node.js(官网) 2.安装淘宝镜像  npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装webpack ...

  3. MD5 加密

    字符串加密 // 1. 准备好一个字符串 NSString *string = @"asdasfaf"; // 2. MD5加密是基于C语言的. 所以要把这个字符串转化成C的字符串 ...

  4. 手把手教你玩转nginx负载均衡（五）----配置后端服务器组

    引言 在前面几篇中,我们成功的搭建起了一台nginx服务器,所以我们要重复前面的步骤,把服务器的数量增加到3台以上,我这里已经建好了另外两台,分别是centos7-22,centos7-23,对应的i ...

  5. Java基础学习（三）

    /* java中的八种基本数据类型: 整数: byte . short . int . long 小数: float double 字符: char 布尔: boolean 字符串的类型: Strin ...

  6. Cocos2d-x 生成真正的随机数

    关于随机数 cocos2d-x 定义了一个宏 CCRANDOM_0_1 生成的是 [0, 1] 之间的值 因此,要生成  [0-100] 之间的数    CCRANDOM_0_1 * 100 生成 [ ...

  7. 微信小程序资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权. 1:下载开发者工具 ...

  8. D3中动画（transition函数）的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  9. IIS 图片加载不出来

    如何为IIS增加svg和woff格式文件的支持 在我们新版的TopFlow中,使用了最新的bootstrap框架,此框架使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis ...

  10. JS - 柯里化

    一:what's this? 柯里化: 是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术.其实,柯里化就是用闭包原理实现函数 ...