使用Javascript来实现二级联动菜单的效果

效果图如下:

具体实现步骤如下:

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="images/4.jpg" />
</body>
时间: 2024-08-05 11:00:16

使用Javascript来实现二级联动菜单的效果的相关文章

JavaScript实现省市二级联动

    JavaScript实现省市二级联动 展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. 将相应的数据赋值给对应的option控件 方法的讲解 Function()函数 onchange();改变事件 笔者在这里写了一个关于河南与河北的简单联动   省市联动 <body> <select id="province"></select>省 &l

使用javascript实现二级联动菜单

本文主要探讨使用javascript实现二级联动菜单.众所周知,二级联动菜单在实际的开发中是比较常见的,虽说实现方式千差万别,但是,使用javascript对其进行实现是使用其他框架进行实现的基础.有必要研究探讨一下. 1.需求 比如,常见的选择所属地区的2级联动菜单,当选择省份之后,2级菜单选项会随之变化. 2.实现思路 2.1页面使用2个select,并用id进行区分 <select id="city"></select> <select id=&qu

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

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

js省市二级联动菜单,IE6,FF下测试通过

<html> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二级联动js,IE6,FF下测试通过</title> <s

JavaScript实现Div二级联动效果(响应键盘按钮)

最近在学习javascript,给了一个题目给我,写一个二级联动效果.当做练习. 写一个二级联动的HTML页面,具体要求如下: 1.页面支持通过键盘上的上下左右键实现焦点的移动 2.页面左侧为父栏目名称,如电影.电视剧.体育.音乐.少儿.综艺.咨询等 3.焦点在对应父栏目上时,展示子栏目信息,如电影栏目下有1,2,3,4,5等子栏目: 4.页面数据为静态数据,可以配置修改: 效果: <html> <head> <title>二级联动</title> <

JavaScript 实现简单二级联动

<body> 省份: <select id="province"> <option value="">请选择</option> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="山东省">山

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

//编辑修改或新增页面联动可以这样写 jQuery(function(){    // 省级     $('#province').combobox({         valueField:'itemvalue', //值字段         textField:'itemtext', //显示的字段         url:'/user/sort/province_list',         panelHeight:'auto',         required:true,       

二级联动菜单

<select name="pro" onchange="t()"> <option value="">请选择</option> <option value="0">北京</option> <option value="1">安徽</option> </select> <select name="

vba实现excel二级联动多选功能

要求 二级菜单需要根据一级菜单的不同变换内容 二级菜单为多选框,选择后,以逗号分隔显示在单元格内 实现 先上效果图,如下图图一所示,这里面是excel2013版本 图一效果图 数据源放在了sheet2里面,数据源如下图二所示.这里,使用第一行为第一级即H列的数据源[H列加数据验证为序列,源为sheet2的第一列,度娘有很详细的步骤]:I列根据H列的不同,加载对应列为多选的选项. 图二数据源 在编写代码的时候,一定要记得先加控件,步骤图如下图三所示,图四是控件的属性图,另外,请先确定启用了宏和开发