首页
所有分类
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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
详解JavaScript树结构
Jan 09 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
JS错误处理与调试操作实例分析
Apr 13 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
死亡搁浅(1) 吸血鬼(1) 原神(1) 绿林侠盗(1) 模拟人生(1) 铁拳(1) AGC(1) FS1016(1) 74HC4066(1) 大话西游(1)
You might like
php 全文搜索和替换的实现代码
2008/07/29 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
javascript处理table表格的代码
2010/12/06 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
python清除函数占用的内存方法
2018/06/25 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python实现flappy bird小游戏
2018/12/24 Python
用python实现刷点击率的示例代码
2019/02/21 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
美国婴童服装市场上的领先品牌：Carter’s
2018/02/08 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
装修设计师求职信
2014/02/26 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
市场营销计划书
2015/01/17 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers