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获取元素偏移量的方法有哪些
Jun 24 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
javascript获取元素的计算样式
May 24 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP CURL使用详解
2019/03/21 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
python学习数据结构实例代码
2015/05/11 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
.net开发工程师面试题
2014/02/25 面试题
工程监理应届生求职信
2013/11/09 职场文书
运动会广播稿100字
2014/01/11 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
工程造价专业求职信
2014/07/17 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang