二级联动
2017-11-21 本文已影响0人
奶瓶SAMA
二级联动主要应用于省市定位,例如美团，饿了么，等需要位置的地方....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>省市联动</title>
<style type="text/css">
select{
height: 30px;
width: 80px;
margin-right: 50px;
}
</style>
</head>
<body>
<select id="sheng">
</select>
<select id="shi">
</select>
<script type="text/javascript">
var arr = {
arrs:[{
arrmy: "北京",
arrname:[{
myname:"海淀"
},{
myname:"软件园"
},{
myname:"石景区"
}
]
},{
arrmy: "河南",
arrname:[{
myname:"郑州"
},{
myname:"新乡"
},{
myname:"南乡"
}
]
},{
arrmy: "美国",
arrname:[{
myname:"华盛顿"
},{
myname:"洛杉矶"
},{
myname:"福尼亚"
}
]
}
]
}
var sheng=document.getElementById("sheng");//获取省份
var shi=document.getElementById("shi");//获取市
mysheng="<option>请选择</option>";//默认
myshi="<option>请选择</option>";//默认
var zu=arr.arrs;//获取所有信息
for(var i=0;i<zu.length;i++){
mysheng+="<option>"+zu[i].arrmy+"</option>"
sheng.innerHTML=mysheng;
shi.innerHTML=myshi;//输出
}
sheng.onchange=function(){
shi.innerHTML="<option>请选择</option>";//重置
var index=sheng.selectedIndex-1;
for(var i=0;i<zu[index].arrname.length;i++){
shi.innerHTML+="<option>"+zu[index].arrname[i].myname +"</option>"
}
}
</script>
</body>
</html>
