Javascript實現動態菜單添加的實例代碼

在注冊信息的時候常常需要通過下拉菜單讓用戶選擇而且希望用戶在第一個下拉框做的選擇影響第二個下拉框的內容有時候如果第一個下拉框不作出選擇第二個下拉框根本不會頁面上顯示為了給用戶呈現一個更清晰的頁面

　　先來看看效果

　　Html源碼

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>動態改變菜單</title>
<script type="text/javascript" src="jqueryjs"></script>
<script type="text/javascript" src="SelectMenujs"></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");
    //給第二個下拉框注冊事件
    ProvinceSelectchange(function () {
        //獲取當前下拉框的值
         var ProvinceValue = $(this)val();
        //只要第一個下拉框內容有變化第三個下拉框就要隱藏起來
        AreaSelectparent()hide();
        AddressSelecthide();
        AddressSelecthtml("");
        //如果值不為空則顯示城市下拉框
         if (ProvinceValue != "") {
                   CitySelecthtml("");
                   $("<option value=>Please Choose City</option>")appendTo(CitySelect);
                    switch(ProvinceValue)
                       {
                        //實際項目中這個城市數組肯定是在服務器獲取的這裡為了簡便我就直接自定義了一個數組
                        //如果追求完美這裡還可以加一道緩存防止重復獲取
                       case "HeBei":
                            var CityOfHeBei=["ShiJiaZhuang""CangZhou""LangFang"];
                            for(var i=;i<CityOfHeBeilength;i++){
                                $("<option value="+CityOfHeBei[i]+">"+CityOfHeBei[i]+"</option>")appendTo(CitySelect);
                            }
                             break;
                       case "ShanDong":
                            var CityOfShanDon=["JiNan""DeZhou""QingDao"];
                            for(var i=;i<CityOfShanDonlength;i++){
                                $("<option value="+CityOfShanDon[i]+">"+CityOfShanDon[i]+"</option>")appendTo(CitySelect);
                            }
                            break;
                       }
                 CitySelectparent()show();
        } else {
            CitySelectparent()hide();
        }
    });
    //給第二個下拉框注冊事件
     CitySelectchange(function () {
            var CityValue = $(this)val();
            AddressSelecthide();
            AreaSelectparent()hide();
            AddressSelecthtml("");
             if (CityValue != "") {
                   AreaSelecthtml("");
                   $("<option value=>Please Choose Area</option>")appendTo(AreaSelect);
                    switch(CityValue)
                       {
                       //實際項目中這個區數組肯定是在服務器獲取的這裡為了簡便我就直接自定義了一個數組
                       //如果追求完美這裡還可以加一道緩存防止重復獲取
                       case "ShiJiaZhuang":
                            var AreaOfCity=["GaoXinQu""KaiFaQu""XinHuaQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                             break;
                       case "CangZhou":
                            var AreaOfCity=["XinHuaQu""YunHeQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                            break;
                       case "LangFang":
                            var AreaOfCity=["AnCiQu""GuangYangQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                            break;
                       case "QingDao":
                            var AreaOfCity=["GaoXinQu""KaiFaQu""XinHuaQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                             break;
                       case "DeZhou":
                            var AreaOfCity=["XinHuaQu""YunHeQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                            break;
                       case "JiNan":
                            var AreaOfCity=["AnCiQu""GuangYangQu"];
                            for(var i=;i<AreaOfCitylength;i++){
                                $("<option value="+AreaOfCity[i]+">"+AreaOfCity[i]+"</option>")appendTo(AreaSelect);
                            }
                            break;
                       }
                     AreaSelectparent()show();
             } else {
                     AreaSelectparent()hide();
            }
    });
    AreaSelectchange(function(){
            var AreaValue=$(this)val();
            AddressSelecthtml("");
            if (AreaValue!=""){
                $("<span>The Address Is Province: "+ProvinceSelectval()+" City: "+CitySelectval()+" Area: "+AreaSelectval()+"</span>")appendTo(AddressSelect);
            AddressSelectshow();
            //alert("The Address Is Province: "+ProvinceSelectval()+" City: "+CitySelectval()+" Area: "+AreaSelectval());
                }
     })
});

　　
這裡還引用了Jquery貌似實現這個效果用不用都無所謂最近為了熟悉Jquery的用法所以就加上了

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20436.html