先来看看效果:

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="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/SelectMenu.js"></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的用法,所以就加上了。

标签:
动态,菜单,添加

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“Javascript实现动态菜单添加的实例代码”

暂无“Javascript实现动态菜单添加的实例代码”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。