效果图如下：

具体实现步骤如下：

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. java.sql.SQLException: ORA-01000: 超出打开游标的最大数

    实际上,这个错误的原因,主要还是代码问题引起的.  ora-01000: maximum open cursors exceeded.  表示已经达到一个进程打开的最大游标数.  这样的错误很容易出现 ...

  2. .NET Attribute 入门【笔记】

    闲谈:没有系统的学过,偶尔看看,看的也不是很清楚. 却一直不明白,本来也不难,自己动手写了个示例.结果一目了然…… Attribute —— 标记 可以对方法.类等事务进行附着.增加属性. 下面以我见 ...

  3. Ext.js的store里放model，还是field？

    按别人的经验, 一般来说,如果通用性强的应用,STORE里存放MODEL,便于重用代码. 如果通用性较弱的(报告,图表),则考虑使用field进行定制.

  4. Win10 UI入门 SliderRectangle

    看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能 <Grid x:Name="> <Grid.ColumnDefinitions> < ...

  5. SpringMVC(二) SpringMVC Hello World

    准备条件: STS(集成了Spring相关工具的Eclipse) Spring软件包 spring-framework-4.3.3.RELEASE-dist.zip. 步骤: 加入jar包. Ecli ...

  6. Swif - 可选型

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4dbf56 } p.p2 { margin: 0.0px 0. ...

  7. nodejs复习02

    process 这个模块是单线程的,无法完全利用多核CPU 基本信息 //程序目录 process.cwd(); //应用程序当前目录 process.chdir('/home'); //改变应用程序 ...

  8. TFS 分支导致nuget项目依赖丢失

    问题: 项目的代码 在tfs上分支后,签出项目.编译时发现无法编译,原有的nuget来的包的dll都丢失了(项目签入时,默认会忽略dll) 在网上找了下,发现一个简单的解决方法: 在"程序包 ...

  9. dedecms 相关文章likearticle

    标签名称:likearticle 功能说明:自动关连文档标签 适用范围:内容页使用 基本语法: {dede:likearticle row='' col='' titlelen='' infolen= ...

  10. su root认证失败的解决方法

    sudo passwd 输入安装密码. 输入新密码. 输入 su 即获得root权限.