知识大全 Javascript实现动态菜单添加的实例代码

Posted 2022-07-20 知

篇首语：不怕学不成，就怕心不诚。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Javascript实现动态菜单添加的实例代码相关的知识，希望对你有一定的参考价值。

Javascript实现动态菜单添加的实例代码 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

在注册信息的时候常常需要通过下拉菜单让用户选择而且希望用户在第一个下拉框做的选择影响第二个下拉框的内容有时候如果第一个下拉框不作出选择第二个下拉框根本不会页面上显示为了给用户呈现一个更清晰的页面

　　先来看看效果

　　Html源码

复制代码代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <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 > <span >Province <select> <option value="" selected Choose Province</option> <option value="HeBei">HeBei</option> <option value="ShanDong">ShanDong</option> </select> </span> <span >City <select> </select> </span> <span >Area <select> </select> </span> <br/> <br/> <span > </span> </div> </form> </body> </>

　　 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 () // 获取当前下拉框的值 var ProvinceValue = $(this) val(); // 只要第一个下拉框内容有变化第三个下拉框就要隐藏起来 AreaSelect parent() hide(); AddressSelect hide(); AddressSelect (""); // 如果值不为空则显示城市下拉框 if (ProvinceValue != "") CitySelect (""); $("<option value=>Please Choose City</option>") appendTo(CitySelect); switch(ProvinceValue) //实际项目中这个城市数组肯定是在服务器获取的这里为了简便我就直接自定义了一个数组 //如果追求完美这里还可以加一道缓存防止重复获取 case "HeBei": var CityOfHeBei=["ShiJiaZhuang" "CangZhou" "LangFang"]; for(var i= ;i<CityOfHeBei length;i++) $("<option value="+CityOfHeBei[i]+" >"+CityOfHeBei[i]+"</option>") appendTo(CitySelect); break; case "ShanDong": var CityOfShanDon=["JiNan" "DeZhou" "QingDao"]; for(var i= ;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 (""); if (CityValue != "") AreaSelect (""); $("<option value=>Please Choose Area</option>") appendTo(AreaSelect); switch(CityValue) //实际项目中这个区数组肯定是在服务器获取的这里为了简便我就直接自定义了一个数组 //如果追求完美这里还可以加一道缓存防止重复获取 case "ShiJiaZhuang": var AreaOfCity=["GaoXinQu" "KaiFaQu" "XinHuaQu"]; for(var i= ;i<AreaOfCity length;i++) $("<option value="+AreaOfCity[i]+" >"+AreaOfCity[i]+"</option>") appendTo(AreaSelect); break; case "CangZhou": var AreaOfCity=["XinHuaQu" "YunHeQu"]; for(var i= ;i<AreaOfCity length;i++) $("<option value="+AreaOfCity[i]+" >"+AreaOfCity[i]+"</option>") appendTo(AreaSelect); break; case "LangFang": var AreaOfCity=["AnCiQu" "GuangYangQu"]; for(var i= ;i<AreaOfCity length;i++) $("<option value="+AreaOfCity[i]+" >"+AreaOfCity[i]+"</option>") appendTo(AreaSelect); break; case "QingDao": var AreaOfCity=["GaoXinQu" "KaiFaQu" "XinHuaQu"]; for(var i= ;i<AreaOfCity length;i++) $("<option value="+AreaOfCity[i]+" >"+AreaOfCity[i]+"</option>") appendTo(AreaSelect); break; case "DeZhou": var AreaOfCity=["XinHuaQu" "YunHeQu"]; for(var i= ;i<AreaOfCity length;i++) $("<option value="+AreaOfCity[i]+" >"+AreaOfCity[i]+"</option>") appendTo(AreaSelect); break; case "JiNan": var AreaOfCity=["AnCiQu" "GuangYangQu"]; for(var i= ;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 (""); 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()); ) ); cha138/Article/program/Java/JSP/201311/20436