三级联动使用Jquery和bootstrap进行布局
网页的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/20170720.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/from3.js"></script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7 colRowForm">
<div class="colRowFormBlue">
<label >省份：</label>
<select id="province">
<option>请选择</option>
<!--<option>河南</option>
<option>山东</option>-->
</select>
<label>城市：</label>
<select id="provinceCity" class="slectFrom">
<!--<option>请选择</option>-->
</select>
<label>街道：</label>
<select id="Citystreet" class="slectFrom">
</select>
</div>
</div>
<div class="col-lg-5 colRowForm">
<div class="colRowFormBlue">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
20170720.css对应的样式
.colRowForm{
border: 1px solid red;
height: 500px;
}
.colRowFormBlue{
border: 2px solid blue;
height: 200px;
max-width:100% ;
}
.slectFrom{
width: 60px;
}
from3.js对应的js文件内容
$(function() {
json = [{
"code": "01",
"name": "河南",
"city": [{
"codec": "0101",
"namec": "郑州",
"streetc": [{
"codeCc": "010101",
"nameCc": "金水区"
}, {
"codeCc": "010102",
"nameCc": "惠济区"
}, {
"codeCc": "010103",
"nameCc": "二七区"
}]
}, {
"codec": "0102",
"namec": "商丘",
"streetc": [{
"codeCc": "010201",
"nameCc": "商丘街区1"
}, {
"codeCc": "010202",
"nameCc": "商丘街区2"
}, {
"codeCc": "010203",
"nameCc": "商丘街区3"
}]
}, {
"codec": "0103",
"namec": "信阳",
"streetc": [{
"codeCc": "010201",
"nameCc": "信阳街区1"
}, {
"codeCc": "010201",
"nameCc": "信阳街区2"
}, {
"codeCc": "010201",
"nameCc": "信阳街区3"
}]
}]
},
{
"code": "02",
"name": "山东",
"city": [{
"codec": "0201",
"namec": "淄博",
"streetc": [{
"codeCc": "010201",
"nameCc": "淄博街区1"
}, {
"codeCc": "010201",
"nameCc": "淄博街区2"
}, {
"codeCc": "010201",
"nameCc": "淄博街区3"
}]
}, {
"codec": "0202",
"namec": "青岛",
"streetc": [{
"codeCc": "010201",
"nameCc": "青岛街区1"
}, {
"codeCc": "010201",
"nameCc": "青岛街区2"
}, {
"codeCc": "010201",
"nameCc": "青岛街区3"
}]
}, {
"codec": "0203",
"namec": "潍坊",
"streetc": [{
"codeCc": "010201",
"nameCc": "潍坊街区1"
}, {
"codeCc": "010201",
"nameCc": "潍坊街区2"
}, {
"codeCc": "010201",
"nameCc": "潍坊街区3"
}]
}]
},
{
"code": "03",
"name": "江苏",
"city": [{
"codec": "0301",
"namec": "苏州",
"streetc": [{
"codeCc": "010201",
"nameCc": "苏州街区1"
}, {
"codeCc": "010201",
"nameCc": "苏州街区2"
}, {
"codeCc": "010201",
"nameCc": "苏州街区3"
}]
}, {
"codec": "0302",
"namec": "南京",
"streetc": [{
"codeCc": "010201",
"nameCc": "南京街区1"
}, {
"codeCc": "010201",
"nameCc": "南京街区2"
}, {
"codeCc": "010201",
"nameCc": "南京街区3"
}]
}, {
"codec": "0303",
"namec": "无锡",
"streetc": [{
"codeCc": "010201",
"nameCc": "无锡街区1"
}, {
"codeCc": "010201",
"nameCc": "无锡街区2"
}, {
"codeCc": "010201",
"nameCc": "无锡街区3"
}]
}]
}
];
$.each(json, function(index, row) {
$("#province").append("<option value=" + row.code + ">" + row.name + "</option>");
});
$("#province").change(function() {
var province = $(this).val();
if(province == "请选择") {
return;
} else {
provinceCity(province);
}
});
$("#provinceCity").change(function(){
var cityName=$(this).val();
cityStreet(cityName);
});
});
function provinceCity(nameProvince) {
$("#provinceCity").empty();
$("#Citystreet").empty();
$.each(json, function(index, row) {
if(row.code == nameProvince) {
$.each(row.city, function(indec, rowc) {
$("#provinceCity").append("<option value=" + rowc.codec + ">" + rowc.namec + "</option>");
if(indec == 0) {
$.each(rowc.streetc, function(indeCc, rowCc) {
$("#Citystreet").append("<option value=" + rowCc.codeCc + ">" + rowCc.nameCc + "</option>");
});
}
});
}
});
};
function cityStreet(nameCity) {
$("#Citystreet").empty();
$.each(json,function(index,row){
$.each(row.city,function(indec,rowc){
if(rowc.codec == nameCity)
{
$.each(rowc.streetc,function(indeCc,rowCc) {
$("#Citystreet").append("<option value=" + rowCc.codeCc + ">" + rowCc.nameCc + "</option>");
});
}
});
});
};
相关文件的
http://pan.baidu.com/s/1geLTzSR
