Javascript实现动态菜单添加的实例代码


Posted in Javascript onJuly 05, 2013

先来看看效果:

Javascript实现动态菜单添加的实例代码

Html源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>动态改变菜单</title>  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="SelectMenu.js"></script>  
</head>  
<body>  
<form action="#">  
<br/>  
<br/>  
<br/>  
    <div class="Address">  
        <span class="Province">Province:  
            <select>  
                <option value="" selected="selected">Please Choose Province</option>  
                <option value="HeBei">HeBei</option>  
                <option value="ShanDong">ShanDong</option>  
            </select>   
        </span>  
        <span class="City" style="display:none">City:  
            <select>  
            </select>  
        </span>  
        <span class="Area" style="display:none">Area:  
            <select>  
            </select>  
        </span>  
        <br/>  
         <br/>  
        <span class="AddressSelect" style="display:none">  
        </span>  
    </div>  
</form>  
</body>  
</html> 

Javascript源码
$(document).ready(function () {  
    //找到三个下拉框   
    var ProvinceSelect = $(".Province").children("select");  
    var CitySelect = $(".City").children("select");  
    var AreaSelect = $(".Area").children("select");  
    var AddressSelect=$(".AddressSelect");  
    //给第二个下拉框注册事件   
    ProvinceSelect.change(function () {  
        //1、获取当前下拉框的值   
         var ProvinceValue = $(this).val();  
        //1.1只要第一个下拉框内容有变化,第三个下拉框就要隐藏起来   
        AreaSelect.parent().hide();  
        AddressSelect.hide();  
        AddressSelect.html("");  
        //2、如果值不为空,则显示城市下拉框   
         if (ProvinceValue != "") {  
                   CitySelect.html("");  
                   $("<option value=''>Please Choose City</option>").appendTo(CitySelect);  
                    switch(ProvinceValue)  
                       {  
                        //实际项目中,这个城市数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组   
                        //如果追求完美,这里还可以加一道缓存,防止重复获取   
                       case "HeBei":  
                            var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];   
                            for(var i=0;i<CityOfHeBei.length;i++){  
                                $("<option value='"+CityOfHeBei[i]+"'>"+CityOfHeBei[i]+"</option>").appendTo(CitySelect);  
                            }  
                             break;  
                       case "ShanDong":  
                            var CityOfShanDon=["JiNan","DeZhou","QingDao"];       
                            for(var i=0;i<CityOfShanDon.length;i++){  
                                $("<option value='"+CityOfShanDon[i]+"'>"+CityOfShanDon[i]+"</option>").appendTo(CitySelect);  
                            }  
                            break;  
                       }  
                 CitySelect.parent().show();     
        } else {  
            CitySelect.parent().hide();  
        }  
    });  
    //给第二个下拉框注册事件   
     CitySelect.change(function () {  
            var CityValue = $(this).val();        
            AddressSelect.hide();  
            AreaSelect.parent().hide();   
            AddressSelect.html("");  
             if (CityValue != "") {  
                   AreaSelect.html("");  
                   $("<option value=''>Please Choose Area</option>").appendTo(AreaSelect);  
                    switch(CityValue)  
                       {  
                       //实际项目中,这个区数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组   
                       //如果追求完美,这里还可以加一道缓存,防止重复获取   
                       case "ShiJiaZhuang":  
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];     
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                             break;  
                       case "CangZhou":  
                            var AreaOfCity=["XinHuaQu","YunHeQu"];        
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                            break;  
                       case "LangFang":  
                            var AreaOfCity=["AnCiQu","GuangYangQu"];  
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                            break;  
                       case "QingDao":  
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];     
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                             break;  
                       case "DeZhou":  
                            var AreaOfCity=["XinHuaQu","YunHeQu"];        
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                            break;  
                       case "JiNan":  
                            var AreaOfCity=["AnCiQu","GuangYangQu"];  
                            for(var i=0;i<AreaOfCity.length;i++){  
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);  
                            }  
                            break;  
                       }  
                     AreaSelect.parent().show();   
             } else {  
                     AreaSelect.parent().hide();  
            }  
    });  
    AreaSelect.change(function(){  
            var AreaValue=$(this).val();  
            AddressSelect.html("");  
            if (AreaValue!=""){  
                $("<span>The Address Is --Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val()+"</span>").appendTo(AddressSelect);  
            AddressSelect.show();  
            //alert("The Address Is  Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val());   
                }                    
     })  
}); 

这里还引用了Jquery,貌似实现这个效果,用不用都无所谓,最近为了熟悉Jquery的用法,所以就加上了。
Javascript 相关文章推荐
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
基于Vue插入视频的2种方法小结
Apr 02 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 #Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 #Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 #Javascript
You might like
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python生成大写32位uuid代码
2020/03/03 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python列表推导式实现代码实例
2020/09/09 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
高中毕业生自我鉴定例文
2013/12/29 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
大学老师推荐信
2014/02/25 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
法学院毕业生求职信
2014/06/25 职场文书
服务标语口号
2014/07/01 职场文书