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的用法，所以就加上了。

赞 (0)

相关推荐

  • JS打字效果的动态菜单代码分享

    JS打字效果的动态菜单代码分享

    这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&

  • JavaScript 下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • JavaScript多级下拉菜单代码(简单实用)

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • js 单击式的下拉菜单效果实例

    复制代码 代码如下: <!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=&qu

  • JavaScript结合PHP实现网页制作中双下拉菜单的动态实现

    本文介绍了双下拉菜单的动态实现的代码,例如:在主菜单中有"焦点新闻"."生活时尚"."心情故事"三个选项,通过"焦点新闻"的选择,子菜单自动生成如"国内"."国际"."体育"."文娱",依此类推. 利用javascript,我们可以轻松实现上述效果.但问题是,如果菜单中的选项是从数据库(或其他文件)中动态提取,实现起来就并不是轻而易举的了.笔者根据

  • 下拉菜单点击实现连接跳转功能的js代码

    1.js代码 复制代码 代码如下: <!-- function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } --> 2.使用 复制代码 代码如下: <p class="yq">校

  • 一个日期下拉菜单的js实现代码

    一个日期下拉菜单的js实现代码

    1.先看效果图: 2.js代码 year_month_day.js 复制代码 代码如下: year_month_day.js function DateSelector(selYear, selMonth, selDay) { this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMonth.Group = this; // 给年份.月份

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

  • Javascript实现动态菜单添加的实例代码

    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>  <

  • javascript下动态this与动态绑定实例代码

    那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象.但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window.不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者. 一个简单的例子: [script] <script> window.name = "window"; var run = function() { alert("My

  • Struts2实现生成动态验证码并验证实例代码

     一.基本流程: 产生一个验证码页面(很小)→嵌入到表单中→点击可以刷新页面→表单提交时验证. 二.方法: 1.定义TestAction,实现画图方法 package com.zhuguang.action; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Map; import javax.se

  • PyQt5主窗口动态加载Widget实例代码

    PyQt5主窗口动态加载Widget实例代码

    本文研究的主要是PyQt5主窗口动态加载Widget的代码示例,具体如下. 我们通过Qt Designer设计两个窗口,命名为主窗口(MainForm)和子窗口(ChildrenForm).我们在主窗口的空白中央添加一个栅格布局并命名为MaingridLayout,等会需要将ChildrenForm放进去. 编写代码 from PyQt5 import QtWidgets from MainForm import Ui_MainForm from Children import Ui_Form

  • JavaScript用二分法查找数据的实例代码

    整理文档,搜刮出一个JavaScript用二分法查找数据的实例代码,顺便做个笔记 //二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<arr.length;i++){ //外层循环控制排序的次数 for(var j=0;j<arr.length-i;j++){//内层循环控制循环的个数 if(arr[j]<arr[j+1]){ z=arr[j]; a

  • jQuery动态增减行的实例代码解析(推荐)

    jQuery动态增减行的实例代码解析(推荐)

    先给大家展示下效果图: 这是没有增加时的界面: 增加后的界面: 删除后的界面: 原因分析: 不擅长jquery和JavaScript 场景: 代码如下: <table class="table table-bordered"> <thead> <tr> <th style="width: 10px">輪次</th> <th style="width: 100%">比賽時間&l

  • matplotlib作图添加表格实例代码

    matplotlib作图添加表格实例代码

    本文所示代码主要是通过Python+matplotlib实现作图,并且在图中添加表格的功能,具体如下. 代码 import matplotlib.pyplot as plt import numpy as np plt.figure() ax = plt.gca() y = np.random.randn(9) col_labels = ['col1','col2','col3'] row_labels = ['row1','row2','row3'] table_vals = [[11,12,

  • 微信小程序下拉菜单效果的实例代码

    微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

  • django js 实现表格动态标序号的实例代码

    django js 实现表格动态标序号 <table class="table table-striped"> <thead> <tr class="key_words_head"> <th>序号</th> <th>类目</th> <th>关键词</th> <th>操作</th> </tr> </thead> &

  • Layui tree 下拉菜单树的实例代码

    1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" cont

随机推荐