效果图如下：

具体实现步骤如下：

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获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  2. swift之inout

    在swift中,我们常常对数据进行一些处理.因为swift的计算属性,所以如果不是大量重复性处理,基本可以在set及didSet中改变原数据的一些状态.但需要用到同样的算法处理大量数据的时候,仍然需要 ...

  3. ［Python数据分析］新股破板买入，赚钱几率如何？

    这是本人一直比较好奇的问题,网上没搜到,最近在看python数据分析,正好自己动手做一下试试.作者对于python是零基础,需要从头学起. 在写本文时,作者也没有完成这个小分析目标,边学边做吧. ＝＝ ...

  4. Spring 系列: Spring 框架简介 -7个部分

    Spring 系列: Spring 框架简介 Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级 ...

  5. [知识笔记]Java 基本数据类型的大小、取值范围、默认值

    数据类型 大小(字节) 范围 默认值 boolean 1/8(1bit) true/false false byte 1 -128~127 (-2^7~2^7-1) 0 short 2 -32768~ ...

  6. Linux系统性能优化思路和方法

    #影响Linux性能的CPU.内存.磁盘.网络等因素分析1.系统硬件资源:CPU,多核与超线程消耗CPU的业务:动态WEB服务,Mail服务器2.内存:物理内存与swap的取舍,64操作系统消耗内存的 ...

  7. oracle sql 执行计划分析

    转自http://itindex.net/detail/45962-oracle-sql-%E8%AE%A1%E5%88%92 一.首先创建表 SQL> show user USER is &q ...

  8. 【Java并发系列02】Object的wait()、notify()、notifyAll()方法使用

    一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: ...

  9. WiX Toolset 教程索引页

    注意:虽然WiX Toolset功能强大,但其学习曲线相对较高.请慎重选择: 若没有足够时间.没心思搞的请绕行至inno setup.installshield.nisi.setupfactory.. ...

  10. Dev Cpp 输出中文字符问题

    最近 c++ 上机作业,vc++6.0 挂了没法用,只好用 Dev Cpp 先顶替一下,然而在遇到输出中文字符的时候出现了乱码的情况,但这种情况又非常诡异.于是简单了解了一下写成此博客. [写在前面] ...