Javascript实现动态菜单添加的实例代码-javascript-IT落伍者

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

先来看看效果

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