首页
所有分类
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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
超全面的JavaScript开发规范（推荐）
Jan 21 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
详解Vue.js iview实现树形权限表（可扩展表）
Sep 30 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 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
Grundig(1) D1835(1) ATS-909X(1) 飞利浦(2) PHILIPS(3) 德生PL330(2) 山进(2) D1875(1) SANGEAN(1) L4X25T(1)
You might like
建立动态的WML站点(三)
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue组件父与子通信详解（一）
2017/11/07 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
vant时间控件使用方法详解
2020/12/24 Javascript
Python多线程实例教程
2014/09/06 Python
Python模拟登录12306的方法
2014/12/30 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python DataFrame 取差集实例
2019/01/30 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
学python最电脑配置有要求么
2020/07/05 Python
python从PDF中提取数据的示例
2020/10/30 Python
python sleep和wait对比总结
2021/02/03 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
在线服装零售商：SheIn
2016/07/22 全球购物
La Redoute英国官网：法国时尚品牌
2017/04/27 全球购物
全球最大的生存食品、水和装备专用在线市场：BePrepared.com
2020/01/02 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
运动会通讯稿300字
2014/02/02 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
工地标语大全
2014/06/18 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2019班干部竞选演讲稿范本！
2019/07/08 职场文书
高考满分作文赏析（2篇）
2019/08/12 职场文书
Spring 使用注解开发
2022/05/20 Java/Android