效果图如下：

具体实现步骤如下：

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. yii 验证问题

    yii 版本2.08 yii 验证码问题 1.模型里加入'verifyCode', 'captcha','message'=>'error','captchaAction' => 'tes ...

  2. teamviewer "TeamViewer Daemon is not running

    执行下面的命令问题解决: # teamviewer --daemon enable enable Sat Jan :: CST Action: Installing daemon () for 'up ...

  3. js立即调用的函数表达式

    1.多种实现 // 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个 (function () { /* code */ })(); ...

  4. tensorflow中的lstm的state

        考虑 state_is_tuple     Output, new_state = cell(input, state)     state其实是两个 一个 c state,一个m(对应下图的 ...

  5. SQL Server 2012 开发新功能 序列对象（Sequence）（转）

    转载链接:http://www.cnblogs.com/zhangyoushugz/archive/2012/11/09/2762720.html 众所周知,在之前的sqlserver版本中,一般采用 ...

  6. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  7. .Net中Remoting通信机制

    Remoting通信机制 Remoting介绍 主要元素 通道类型 激活方式 对象定义 Remoting介绍 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式. 从微软的产品角度 ...

  8. sublime Text 3 安装emmet

    Emmet简介 Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率. 官网:http://emmet.io/ 在Sublime Text 3中安装 前提Sub ...

  9. 学习微信小程序之css4设置颜色,单位表示，字体样式

    颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

  10. sqlmap 帮助信息

    Usage: sqlmap.py [options] 选项: -h, --help 显示基本的帮助信息并退出 -hh 显示高级的帮助信息并退出 --version 显示程序版本号并退出 -v VERB ...