html jquery select 三级菜单
通过读取json数据完成无刷新加载
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>getJSON获取数据</title>
<script src="../../bootstrap_test/bootstrap/js/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.selectList{width:300px;margin:50px auto;}
</style>
</head>
<body>
<div class="selectList">
<select class="province">
<option>请选择</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<select class="district">
<option>请选择</option>
</select>
</div>
<script>
$(function(){
var areaJson;
var func = {
"province": function(areaJson) {
temp_html = "";
$.each(areaJson,function(i,province){
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
});
$(".province").html(temp_html);
func.city(areaJson);
},
"city": function(areaJson) {
var n = $(".province").get(0).selectedIndex,
temp_html="";
$.each(areaJson[n].c, function(i, city) {
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
});
$(".city").html(temp_html);
func.district(areaJson);
},
"district": function(areaJson) {
var m = $(".province").get(0).selectedIndex,
n = $(".city").get(0).selectedIndex,
temp_html="";
if(typeof(areaJson[m].c[n].d) == "undefined") {
$(".district").css("display", "none");
}
else
{
$(".district").css("display","inline");
$.each(areaJson[m].c[n].d, function (i, district) {
temp_html += "<option value='" + district.dt + "'>" + district.dt + "</option>";
});
$(".district").html(temp_html);
}
}
};
//获取json数据
$.getJSON("./area.json",function(data){
areaJson = data;
//为省份赋值
func.province(data);
});
$(".province").change(function(){
func.city(areaJson);
});
$(".city").change(function(){
func.district(areaJson);
});
})
</script>
</body>
</html>
area.json
[
{
"p": "江西省",
"c": [
{
"ct": "南昌市",
"d": [
{
"dt": "西湖区"
},
{
"dt": "东湖区"
},
{
"dt": "高新区"
}
]
},
{
"ct": "赣州市",
"d": [
{
"dt": "瑞金县"
},
{
"dt": "南丰县"
},
{
"dt": "全南县"
}
]
}
]
},
{
"p": "北京",
"c": [
{
"ct": "东城区"
},
{
"ct": "西城区"
}
]
},
{
"p": "河北省",
"c": [
{
"ct": "石家庄",
"d": [
{
"dt": "长安区"
},
{
"dt": "桥东区"
},
{
"dt": "桥西区"
}
]
},
{
"ct": "唐山市",
"d": [
{
"dt": "滦南县"
},
{
"dt": "乐亭县"
},
{
"dt": "迁西县"
}
]
}
]
}
]
