JavaScript简单下拉菜单特效
本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下
实例1：联动的省市下拉菜单
onchange事件会在域的内容改变时发生。
<scripttype="text/javascript">
vararr=newArray();//数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length]=[1,'北京市',null];
arr[arr.length]=[2,'四川省',null];
arr[arr.length]=[3,'广东省',null];
arr[arr.length]=[4,'北京市',1];
arr[arr.length]=[5,'成都市',2];
arr[arr.length]=[6,'广州市',3];
arr[arr.length]=[7,'深圳市',3];
//动态设置下拉项目
functionfillOptions(type){
if(type=='province'){
//获取省份下拉菜单的DOM
varprovince=document.getElementById("province");
province.innerHTML='';//内容先置空
//填充省的字符
varproStr='<optionvalue=""></option>';
//遍历数组
for(vari=0;i<arr.length;i++){
varitem=arr[i];//当前项
//如果没有父id，则是省份
if(item[2]==null)
proStr+='<optionvalue='+item[0]+'>'+item[1]+'</option>';
}
province.innerHTML=proStr;//填充新内容
}elseif(type=='city'){
//获取当前的省份的id
varcurrProId=document.getElementById("province").value;
if(currProId=='')
returnfalse;
//获取城市下拉菜单的DOM
varcity=document.getElementById("city");
city.innerHTML='';//内容先置空
//填充市的字符
varcityStr='<optionvalue=""></option>';
//遍历数组
for(vari=0;i<arr.length;i++){
varitem=arr[i];//当前项
//判断是否为当前省下的城市
if(item[2]==currProId)
cityStr+='<optionvalue='+item[0]+'>'+item[1]+'</option>';
}
city.innerHTML=cityStr;//填充新内容
}
}
</script>
<bodystyle="text-align:center;"onload="fillOptions('province');">
<!--定义下拉菜单-->
省：<selectid="province"onchange="fillOptions('city')"></select><br/><br/>
市：<selectid="city"></select><br/><br/>
</body>
实例2：三级联动的省市县下拉菜单
<scripttype="text/javascript">
vararr=newArray();//数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length]=[1,'北京市',null];
arr[arr.length]=[2,'四川省',null];
arr[arr.length]=[3,'广东省',null];
arr[arr.length]=[4,'北京市',1];
arr[arr.length]=[5,'成都市',2];
arr[arr.length]=[6,'广州市',3];
arr[arr.length]=[7,'深圳市',3];
arr[arr.length]=[8,'武侯区',5];
arr[arr.length]=[9,'青羊区',5];
arr[arr.length]=[10,'白云区',6];
arr[arr.length]=[11,'增城市',6];
arr[arr.length]=[12,'从化市',6];
//动态设置下拉项目
functionfillOptions(type){
if(type=='province'){
//获取省份下拉菜单的DOM
varprovince=document.getElementById("province");
province.innerHTML='';//内容先置空
//填充省的字符
varproStr='<optionvalue=""></option>';
for(vari=0;i<arr.length;i++){//遍历数组
varitem=arr[i];//当前项
//如果没有父id，则是省份
if(item[2]==null)
proStr+='<optionvalue='+item[0]+'>'+item[1]+'</option>';
}
province.innerHTML=proStr;//填充新内容
}elseif(type=='city'){
//获取当前的省份的id
varcurrProId=document.getElementById("province").value;
if(currProId=='')
returnfalse;
//获取城市下拉菜单的DOM
varcity=document.getElementById("city");
city.innerHTML='';//内容先置空
//填充市的字符
varcityStr='<optionvalue=""></option>';
for(vari=0;i<arr.length;i++){//遍历数组
varitem=arr[i];//当前项
//判断是否为当前省下的城市
if(item[2]==currProId)
cityStr+='<optionvalue='+item[0]+'>'+item[1]+'</option>';
}
city.innerHTML=cityStr;//填充新内容
}elseif(type=='area'){
//获取当前城市的id
varcurrCityId=document.getElementById("city").value;
if(currCityId=='')
returnfalse;
//获取区县下拉菜单的DOM
vararea=document.getElementById("area");
area.innerHTML='';//内容先置空
//填充区县的字符
varareaStr='<optionvalue=""></option>';
for(vari=0;i<arr.length;i++){//遍历数组
varitem=arr[i];//当前项
//判断是否为当前城市下的区县
if(item[2]==currCityId)
areaStr+='<optionvalue='+item[0]+'>'+item[1]+'</option>';
}
area.innerHTML=areaStr;//填充新内容
}
}
</script>
<bodystyle="text-align:center;"onload="fillOptions('province');">
<!--定义下拉菜单-->
省：<selectid="province"onchange="fillOptions('city')"></select><br/><br/>
市：<selectid="city"onchange="fillOptions('area')"></select><br/><br/>
县/区：<selectid="area"></select><br/><br/>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。