温馨提示：记得运行之前要引入jquery-3.0.0.min.js
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>index.xml</title>
<script type="text/javascript"src="js/jquery-3.0.0.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
省份：<select name="pro" id="pro"></select>
城市：<select name="city" id="city"></select>
县：<select name="county" id="county"></select>
<script type="text/javascript">
var pro=[["1","河南"],["2","北京"],["3","河北"]];
var city=[["1","郑州","1"],["1","开封","2"],["1","洛阳","3"],["2","北京市","4"],["3","石家庄","5"],["3","保定","6"],["3","唐山","7"],["3","张家口","8"],["3","廊坊","9"]];
var county=[["1","中原区"],["1","二七区"],["1","管城区"],["2","鼓楼区"],["2","禹王台"],["3","洛龙区"],["3","孟津县"],["3","栾川县"],["3","汝阳县"],["4","崇文区"],["4","宣武区"],
["5","灵寿县"],["5","行唐县"],["5","井陉县"],["5","新华区"],["6","北市区"],["6","阜平县"],["7","路北区"],["7","丰南区"],["8","张家口1"],["9","廊坊1"]];
$(function(){
//先选择默认的三个联动,实现了省份、城市联动后，默认县为默认城市下的县
$("#pro").change(function (){
var pro_citys;
var city_countys;
for(var i=0;i<city.length;i++){//循环city比较当前省份id，
// city_countys="";//清空保存的县，使只保留该城市的县
if($(this).val()==city[i][0]){//如果城市id==省份id，将该城市加入pro_citys
pro_citys+="<option value='"+city[i][2]+"'>"+city[i][1]+"</option>";
for(var j=0;j<county.length;j++){//再循环县id比较当前得到的城市id
if(city[i][2]==county[j][0]){//如果县id等于城市id，加入city_countys
city_countys+="<option>"+county[j][1]+"</option>";
}
}
$("#county").html(city_countys);//将所有县打印
}else if($(this).val()==0){//如果省份点击了-请选择-，则都显示-请选择-
pro_citys="<option value='0'>-请选择城市-</option>";
//city_countys="<option value='0'>-请选择县-</option>";
$("#county").html("<option value='0'>-请选择县-</option>");
}
}
$("#city").html(pro_citys);//将所有城市打印
});
//点击城市联动县
$("#city").change(function (){
//alert($(this).val());
var city_county;
for(var i=0;i<county.length;i++){
if($(this).val()==county[i][0]){
city_county+="<option>"+county[i][1]+"</option>";
}
}
$("#county").html(city_county);
});
//开始显示全部省份
var pro_names="<option value='0'>-请选择省份-</option>";
for(var i=0;i<pro.length;i++){
pro_names+="<option value='"+pro[i][0]+"'>"+pro[i][1]+"</option>";
}
$("#pro").html(pro_names);
//设置开始默认河南城市
var citys="<option value='0'>-请选择城市-</option>";
$("#city").html(citys);
//设置开始默认郑州以下县
var countys="<option value='0'>-请选择县-</option>";
$("#county").html(countys);
});
</script>
</body>
</html>
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
