首页
所有分类
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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
微信上传视频文件提示（推荐）
Nov 22 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 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
ICF-SW7600(1) GF515(1) RP2100(1) PL450(1) H-501(1) SHARP(1) PL550(1) BCL3000(2) 乐信(1) 低放电路(1)
You might like
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
深入理解JavaScript系列（38）：设计模式之职责链模式详解
2015/03/04 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
戴尔新加坡官网：Dell Singapore
2020/12/13 全球购物
《雪儿》教学反思
2014/04/17 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
教师节寄语2015
2015/03/23 职场文书
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS