<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
如果你的项目需要制作3级以上联动菜单，就是那种鼠标划过一级菜单时二级菜单会显现、并同时会显示一个默认的三级菜单，而划过二级菜单则对应的三级菜单轮动显现的那种你会怎么做？是用css+div来制作还是用css+div+javascript，还是用jquery呢？这里介绍一个纯css制作三级联动菜单的方案。
假设你的项目要求制作一个划过位于顶部的多个主菜单之后显示与主菜单相对应的左、右侧的导航子菜单，左边的菜单是2级菜单、右边的是3级菜单。再依次划过左边导航菜单时显示相应的右边菜单（联动）。主要思路可以是这样的：
首先，控制和定位分离。所谓控制是指划过主菜单时下面的二、三级菜单的控制，定位是指二级和三级菜单的具体显示位置的定位，其中主要是三级菜单的定位，因为二级菜单定位相对简单。
在控制层面上，顶部各个主菜单是处于父div, 二、三级菜单分别处于子div和孙div的位置（大体思路）。
在定位层面上，二级菜单处于左侧，三级菜单在右侧。三级菜单要求在划过二级菜单时在右侧同一个位置联动显现。为了实现在同一个位置显现的目的，可在所有三级菜单外加一个定位div，给这个定位div设置position:relative，而给所有三级菜单设置相对于这个定位div的position:absolute。这样以来所有菜单都将在右侧同一个位置出现。注意这时候大的定位div和三级菜单div之间不能再出现其他position为relative的div，否则会发生错乱。
