效果图如下：

具体实现步骤如下：

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. Linux /proc/$pid部分内容详解

    auxv /proc/[pid]/auxv包含传递给进程的ELF解释器信息,格式是每一项都是一个unsigned long长度的ID加上一个unsigned long长度的值.最后一项以连续的两个0x ...

  2. sqlval

    SQL_STRUCTURE sqlvar { short sqltype; short sqllen; _SQLOLDCHAR *SQL_POINTER sqldata; short *SQL_POI ...

  3. C 标准库系列之概述

    基本上很多编程语言都会提供针对语言本身的一系列的标准库或者包,当然C语言同样也有提供标准库,C语言的标准库是一系列的头文件的集合:如assert.h.ctype.h.errno.h.float.h.l ...

  4. Spring-boot 开发Web应用

    动态修改Freemarker模版: 设置模版属性:   spring.freemarker.cache=false 启动应用方式有两种: a. 运行main()函数启动应用:则修改完模版文件后,需要把 ...

  5. POJ 2718 Smallest Difference【DFS】

    题意: 就是说给你一些数,然后要求你使用这些数字组成2个数,然后求他们的差值最小. 思路: 我用的双重DFS做的,速度还比较快,其中有一个很重要的剪枝,若当前搜索的第二个数后面全部补零与第一个数所产生 ...

  6. ASP.NET 给作为隐藏域的TextBox赋值之后提交表单，无响应?

    操作步骤: 给页面隐藏TextBox赋值,然后触发ASP.NET change事件,调用ASP.NET后台方法,调用后执行客户端脚本this.RegisterClientScriptBlock(Dat ...

  7. 安卓智能POS开单神器-成为零售批发商亲睐的生意帮手-pda销售扫描开单 现场结算打印凭据

    pda销售开单主要有盘点.出库.入库.销售等操作. 主要功能: 出库作业(销售开单.销售退货.销售赠品).入库作业(进货开单.进货退货.进货赠品).盘点作业(能盘盈盘亏)等操作,带蓝牙打印功能 3.仓 ...

  8. 杨氏矩阵定义及其查找的实现C++

    先介绍一下这个数据结构的定义,Young Tableau有一个m*n的矩阵,然后有一数组 a[k], 其中 k<=m*n ,然后把a[k]中的数填入 m*n 的矩阵中,填充规则为: 1.  每一 ...

  9. Codeforces CF#628 Education 8 E. Zbazi in Zeydabad

    E. Zbazi in Zeydabad time limit per test 5 seconds memory limit per test 512 megabytes input standar ...

  10. java合并pdf

    一.开发准备 下载pdfbox-app-1.7.1.jar包;下载地址:http://download.csdn.net/detail/yanning1314/4852276 二.简单小例子 在开发中 ...