<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script src="jquery-1.11.0.js"></script>
</head>
<body>
<select id="sheng">
<option value="0">请选择省</option>
<option value="1">河南</option>
<option value="2">河北</option>
<option value="3">湖南</option>
<option value="4">湖北</option>
</select>
<select id="city">
<option value="0">请选择市</option>
</select>
<select id="qu">-
<option value="0">请选择县</option>
</select>
</body>
</html>
<script>
//当省份改变时 获取value值
$('#sheng').change(function(){
// alert(1);
// 获取用户选择的省份
var sheng = $(this).val();
//城市的列表
var cityList = [
['请选择市'],
['请选择市','郑州','焦作','洛阳'],
['请选择市','石家庄','保定','廊坊'],
['请选择市','长沙','张家界','岳阳'],
['请选择市','武汉','宜昌','荆门']
];
//跟具value值 选取地级市列表
//删除地级市和下级县的所有信息
$('#city option').remove();
$('#qu option').not($('#qu option').first()).remove();
//地级市列表 cityList[sheng]
for(var i in cityList[sheng]){
var cityAdd = "<option value="+i+">"+cityList[sheng][i]+"</option>";
$('#city').append(cityAdd);
}
})
// 当地级市改变时 获取value的值
$('#city').change(function(){
var sheng = $('#sheng').val();
//console.log(sheng);
var city = $(this).val();
// 区的列表
var qu =[
[
['请选择市'],
['请选择区']
],
[
['请选择区'],
['二七区','金水区'],
['解放区','马村区'],
['洛阳一区','洛阳二区']
],
[
['请选择区'],
['石家庄一区','石家庄二区'],
['保定一区','保定二区'],
['廊坊一区','廊坊二区']
],
[
['请选择区'],
['长沙一区','长沙二区'],
['张家界一区','张家界二区'],
['岳阳一区','岳阳二区']
],
[
['请选择区'],
['武汉一区','武汉二区'],
['宜昌一区','宜昌二区'],
['荆门一区','荆门二区']
]
];
var three = qu[sheng][city];
// console.log(three);
// 删除地级县的所有信息
$('#qu option').not($('#qu option').first()).remove();
for(var j in three){
var quAdd = "<option>"+three[j]+"</option>";
$('#qu').append(quAdd);
}
})
</script>
