JavaScript实现三级联动菜单效果
三级联动考察的应该是对于数据的处理,只要清楚其中的关系,再多几级都是一样的:
html部分:
3级联动菜单
js部分:
varprovince=document.querySelector("#province"); varcity=document.querySelector("#city"); varcounty=document.querySelector("#county"); //二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值 varprovinceName=null; for(eleinregion){ varop=newOption(ele,ele,false,false);//newOption("文本","值",true,true).后面两个true分别表示默认被选中和有效 //console.log(op); province.options[province.length]=op; } varchange=function(src){ city.innerHTML=""; if(src==='请选择省份'){ varop=newOption('请选择地市','请选择地市',false,false); city.options[0]=op; }else{ for(indexinregion[src]){ //console.log(index); varop=newOption(index,index,false,false); city.options[city.length]=op; } } //记住选择省份的值 provinceName=src; countyChange(city.value) } varcountyChange=function(src2){ county.innerHTML=""; if(src2==='请选择地市'){ varop=newOption('请选择县城','请选择县城',false,false); county.options[0]=op; }else{ for(indexinregion[provinceName][src2]){ //console.log(index); varop=newOption(region[provinceName][src2][index],region[provinceName][src2][index],false,false); county.options[county.length]=op; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。