Heim > Web-Frontend > js-Tutorial > Javascript实现动态菜单添加的实例代码_javascript技巧

Javascript实现动态菜单添加的实例代码_javascript技巧

WBOY
Freigeben: 2016-05-16 17:29:45
Original
891 Leute haben es durchsucht

先来看看效果:

Javascript实现动态菜单添加的实例代码_javascript技巧

Html源码:

复制代码 代码如下:

 
 
 
 
动态改变菜单 
 
 
 
 
 

 

 

 
   
 
        Province: 
              
       
 
         
         
       
 
        
 
         
   
 
 
 
 

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(""); 
                   $("").appendTo(CitySelect); 
                    switch(ProvinceValue) 
                       { 
                        //实际项目中,这个城市数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组  
                        //如果追求完美,这里还可以加一道缓存,防止重复获取  
                       case "HeBei": 
                            var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];  
                            for(var i=0;i                                $("").appendTo(CitySelect); 
                            } 
                             break; 
                       case "ShanDong": 
                            var CityOfShanDon=["JiNan","DeZhou","QingDao"];      
                            for(var i=0;i                                $("").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(""); 
                   $("").appendTo(AreaSelect); 
                    switch(CityValue) 
                       { 
                       //实际项目中,这个区数组肯定是在服务器获取的,这里为了简便,我就直接自定义了一个数组  
                       //如果追求完美,这里还可以加一道缓存,防止重复获取  
                       case "ShiJiaZhuang": 
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                             break; 
                       case "CangZhou": 
                            var AreaOfCity=["XinHuaQu","YunHeQu"];       
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "LangFang": 
                            var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "QingDao": 
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                             break; 
                       case "DeZhou": 
                            var AreaOfCity=["XinHuaQu","YunHeQu"];       
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "JiNan": 
                            var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                            for(var i=0;i                                $("").appendTo(AreaSelect); 
                            } 
                            break; 
                       } 
                     AreaSelect.parent().show();  
             } else { 
                     AreaSelect.parent().hide(); 
            } 
    }); 
    AreaSelect.change(function(){ 
            var AreaValue=$(this).val(); 
            AddressSelect.html(""); 
            if (AreaValue!=""){ 
                $("The Address Is --Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val()+"").appendTo(AddressSelect); 
            AddressSelect.show(); 
            //alert("The Address Is  Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val());  
                }                   
     }) 
}); 

这里还引用了Jquery,貌似实现这个效果,用不用都无所谓,最近为了熟悉Jquery的用法,所以就加上了。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage