Javascript實現動態菜單添加的執行個體代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先來看看效果：

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More