<select id="s1" onChange="move()"> <!-- 根据id获取value,onchange()触发函数move()修改二级select的text值实现联动 --> <option selected value="s1">-- 请选择 --</option> <!--默认选中--> <option value="SC">SC</option> <option value="BJ">BJ</option> <option value="TJ">TJ</option> </select> <select id="s2"> <option selected>-- 请选择 --</option> <!--默认选中,动态生成option --> </select>
function move() { var s1=document.getElementById("s1"); var s2=document.getElementById("s2"); <!-- 获取一级和二级的属性--> var add; if(s1.value=="SC") { add=new Array("CD","DZ","MY","NC"); <!--比对value值,实现对应二级text值的动态生成--> }else if(s1.value=="BJ") { add=new Array("HD","CY","WFJ"); <!--比对value值,实现对应二级text值的动态生成--> }else if(s1.value=="TJ") { add=new Array("TJG","TJ","TJY"); <!--比对value值,实现对应二级text值的动态生成--> }else if(s1.value=="s1") { add=new Array("请选择"); } else { add=null; <!--若没有就为空,当然不可能出现的--> } s2.length=0; for(var i=0;i<add.length;i++) { var ss=new Option(); ss.text=add[i].split()[0]; s2.add(ss); <!--把text值添加到二级select中,显示出来--> } }