Javascript_javascript 기술을 사용하여 동적 메뉴를 추가하는 예제 코드

先来看看效果 ：

html ： \

代码如下 代码如下 代码如下 : & lt;! Doctype Html Publ "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 

<머리> 
  & lt; title & gt; 动态改变菜单 & lt;/title & gt; 
 
 
 
<본문> 

 

 

 

  & lt; div class = "주소"& gt; 
        지방： 
            <선택>  & lt; 옵션 값 = ""selected = "selected"& gt; province & lt;/옵션 & gt; 
                허베이 
                ShanDong  & lt;/select & gt;   & lt;/span & gt; 
        도시： 
            <선택>  & lt;/select & gt;  & lt;/span & gt;  & lt; span class = "area"style = "display : none"& gt; area ：
& lt; select & gt;  & lt;/select & gt; 
         
       
 
        
  & lt;/span & gt; 
   

 
 
 
 
javaScript 源码




代码如下 : $ (document) .ready (function () { var citySelect = $ ( ". city"). children ( "select"); 주소 selects ");

// 두 번째 드롭 다운 상자에 대한 이벤트 등록 provinceselect.change (function () { // 1. 현재 드롭 다운 상자의 값을 가져옵니다. > var provincevalue = $ (this) .Val (); 첫 번째 드롭 다운 상자의 내용이 변경되는 한 pareSelect.parent () .Hide (); CitySelect.html ( ""); "& lt; 옵션 값 = '') 🎜> switch (provincevalue)
/실제 프로젝트 에서이 도시 배열은 서버에서 얻어야합니다 ","cangzhou ","langfang "];
for (var i = 0; i & lt; cityofhe bei.length; i) { ' "CityOfShandon [i]"& gt; "CityOfShandon [i]"& lt;/옵션 & gt; "). Appendto (CitySelect); 
                           휴식; 
                     } 
                 CitySelect.parent().show();    
        } else { 
            CitySelect.parent().hide(); 
        } 
    }); 
    //给第二个下拉框注册事件  
     CitySelect.change(function () { 
            var CityValue = $(this).val();       
            AddressSelect.hide();
           AreaSelect.parent().hide();  
           AddressSelect.html("") 🎜>                  $( "<옵션 값=''>지역을 선택하세요").appendTo(AreaSelect); 
                 스위치(CityValue) 
                    { 
                     //实际项目中，这个区数组肯定是에서 服务器获取的，这里为了简便，我就直接自定义了一个数组  
                    //如果追求完美 这里还可以加一道缓存，防止复获取  
                    사례 "ShiJiaZhuang": 
                         var AreaOfCity= ["GaoXinQu","KaiFaQu","XinHuaQu"];    
                       for(var i=0;i                           $("<옵션 값='" AreaOfCity[i] "'>" AreaOfCity[i] "").appendTo(AreaSelect); 
                      } 
                        휴식; 
                     사례 "CangZhou": 
                         var AreaOfCity=["XinHuaQu","YunHeQu"];       
                          for(var i=0;i                           $("" [i] "                           } 
                           휴식; 
                     사례 "LangFang": 
                         var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                          for(var i=0;i                           $("" [i] "                          } 
                         휴식; 
                     사례 "QingDao": 
                         var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
                          for(var i=0;i                           $("" [i] "                          } 
                          휴식; 
                     사례 "DeZhou": 
                         var AreaOfCity=["XinHuaQu","YunHeQu"];       
                          for(var i=0;i                           $("" [i] "                           } 
                           휴식; 
                     사례 "JiNan": 
                         var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                          for(var i=0;i                           $("" [i] "                          } 
                         휴식; 
                     } 
                    AreaSelect.parent().show();  
             } else { 
                    AreaSelect.parent().hide(); 
            } 
    }); 
    AreaSelect.change(function(){ 
            var AreaValue=$(this).val(); 
            AddressSelect.html(""); 
            if (AreaValue!=""){ 
               $("주소는 --Province: " ProvinceSelect.val() "  도시: " CitySelect.val() "  지역: " AreaSelect.val() "").appendTo (AddressSelect); 
            AddressSelect.show(); 
           //alert("주소는  주: " ProvinceSelect.val() "  도시: " CitySelect.val() "  지역: " AreaSelect.val() );  
               }                  
     }) 
}); 
这里还引用了 jQuery, 貌似实现这个效果, 用不用都无所谓, 最近为了熟悉 jQuery 的用法 的用法, 所以就加上了。