首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
Javascript面试题(44) EJB面试题(46) SOA面试题(9) J2EE面试题(19) Servlet面试题(20) UNIX面试题(27) Ruby面试题(15) Delphi面试题(13) PYTHON面试题(27) MySQL面试题(19)
You might like
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
php简单日历函数
2015/10/28 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
Mootools 1.2教程 滚动条（Slider）
2009/09/15 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
2017/01/24 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python获取央视节目单的实现代码
2015/07/25 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python Gabor滤波器讲解
2020/10/26 Python
计算机毕业生自荐信范文
2014/03/23 职场文书
企业活动策划方案
2014/06/02 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
授权委托书（公民个人适用）
2014/09/19 职场文书
旷课检讨书范文
2014/10/30 职场文书
深入浅出的讲解：信号调制到底是如何实现的
2022/02/18 无线电
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python