htmljqueryselect三级菜单
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
htmljqueryselect三级菜单通过读取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>
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": "迁西县" }
]
}
]
}
]。