javascript实现简单的二级联动
二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。
要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。
首先，onchange事件会在域的内容改变时发生。支持该事件的JavaScript对象：fileUpload,select,text,textarea，我们在实现二级联动中正是用到select来完成。
以下是HTML代码，先设置一个select为省，第二个select为市，但是市我们在js中用数组将其与省份连接。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>javascript二级联动</title> </head> <body> <selectid="province"> <optionvalue="-1">省</option> <optionvalue="0">北京</option> <optionvalue="1">浙江</option> </select> <selectid="city"> </select> <scriptsrc="../js/province.js"></script> </body> </html>
以下是js代码
varprovince=document.getElementById("province");
varcity=document.getElementById("city");
vararea=[
['朝阳','海淀','北京'],//第0个area的数组。0{0,1,2}
['杭州','海宁'] //第1个area的数组,1{0.1}
];
functionchoose(){
varopt="";
varlen=area[province.value]; //如果选择北京0，那么，len=['朝阳‘，'海淀‘] 这个是连接哪个省份对应着哪个市的<spanstyle="background-color:#888888;">市的</span>数组
if(province.value=='-1'){ //因为select的value为-1的时候是‘省'这个字，而不是北京，所以，我们选择这个省的时候对应着让他的市为空
city.innerHTML=opt;
}
for(vari=0;i<len.length;i++){ //area的数组个数for(i=0;i<3;i++)
opt=opt+'<optionvalue="'+i+'"> '+len[i]+'</option>' //opt=""+<optionvalue="0">朝阳(lin[0])</option>,
//opt=<optionvalue="0">朝阳(lin[0])</option>,+<br>
<optionvalue="1">海淀(lin[1])</option>
//opt=<optionvalue="0">朝阳(lin[0])</option>,+<br>
<optionvalue="1">海淀(lin[1])</option>+<br>
<optionvalue="2">北京(lin[2])</option>
}
city.innerHTML=opt;
}
province.onchange=function(){
choose();
}
二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。
要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。
以上所述就是本文的全部内容了，希望大家能够喜欢。