首页
所有分类
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 boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
微信小程序教程系列之新建页面（4）
Apr 17 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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) HDR(1) kafka(2) OutputStream(1) Vue3(1) 曝光融合(1) 高动态范围(1) axios(1) shell脚本(1) InputStream(1)
You might like
php empty函数 使用说明
2009/08/10 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python3生成随机数实例
2014/10/20 Python
python写入xml文件的方法
2015/05/08 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
python 操作excel表格的方法
2020/12/05 Python
澳大利亚领先的孕妇服装品牌：Mamaway
2018/08/14 全球购物
自1926年以来就为冰岛保持温暖：66°North
2020/11/27 全球购物
Java面试题：请说出如下代码的输出结果
2013/04/22 面试题
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android