SoFunction
Updated on 2025-03-10

Javascript implements instance code added to dynamic menu


$(document).ready(function () { 
//Find three drop-down boxes
    var ProvinceSelect = $(".Province").children("select"); 
    var CitySelect = $(".City").children("select"); 
    var AreaSelect = $(".Area").children("select"); 
    var AddressSelect=$(".AddressSelect"); 
//Register events for the second drop-down box
    (function () { 
//1. Get the value of the current drop-down box
         var ProvinceValue = $(this).val(); 
//1.1 As long as the content of the first drop-down box changes, the third drop-down box must be hidden.
        ().hide(); 
        (); 
        (""); 
//2. If the value is not empty, the city drop-down box will be displayed.
         if (ProvinceValue != "") { 
                   (""); 
                   $("<option value=''>Please Choose City</option>").appendTo(CitySelect); 
                    switch(ProvinceValue) 
                       { 
//In actual projects, this city array must be obtained on the server. For simplicity, I directly customized an array.
//If you pursue perfection, you can add a cache here to prevent repeated acquisitions.
                       case "HeBei": 
                            var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];  
                            for(var i=0;i<;i++){ 
                                $("<option value='"+CityOfHeBei[i]+"'>"+CityOfHeBei[i]+"</option>").appendTo(CitySelect); 
                            } 
                             break; 
                       case "ShanDong": 
                            var CityOfShanDon=["JiNan","DeZhou","QingDao"];      
                            for(var i=0;i<;i++){ 
                                $("<option value='"+CityOfShanDon[i]+"'>"+CityOfShanDon[i]+"</option>").appendTo(CitySelect); 
                            } 
                            break; 
                       } 
                 ().show();    
        } else { 
            ().hide(); 
        } 
    }); 
//Register events for the second drop-down box
     (function () { 
            var CityValue = $(this).val();       
            (); 
            ().hide();  
            (""); 
             if (CityValue != "") { 
                   (""); 
                   $("<option value=''>Please Choose Area</option>").appendTo(AreaSelect); 
                    switch(CityValue) 
                       { 
//In actual projects, this area array must be obtained on the server. For simplicity, I directly customized an array.
//If you pursue perfection, you can add a cache here to prevent repeated acquisitions.
                       case "ShiJiaZhuang": 
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                             break; 
                       case "CangZhou": 
                            var AreaOfCity=["XinHuaQu","YunHeQu"];       
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "LangFang": 
                            var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "QingDao": 
                            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                             break; 
                       case "DeZhou": 
                            var AreaOfCity=["XinHuaQu","YunHeQu"];       
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                            break; 
                       case "JiNan": 
                            var AreaOfCity=["AnCiQu","GuangYangQu"]; 
                            for(var i=0;i<;i++){ 
                                $("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect); 
                            } 
                            break; 
                       } 
                     ().show();  
             } else { 
                     ().hide(); 
            } 
    }); 
    (function(){ 
            var AreaValue=$(this).val(); 
            (""); 
            if (AreaValue!=""){ 
                $("<span>The Address Is --Province: "+()+"  City: "+()+"  Area: "+()+"</span>").appendTo(AddressSelect); 
            (); 
            //alert("The Address Is  Province: "+()+"  City: "+()+"  Area: "+());  
                }                   
     }) 
});