三级下拉列表
1.需要的js插件
- jquery.js；
- bootstrap.js；
- 注意：导入bootstrap.js时导入bootstrap.css；
2.各省市区的json文件
3. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 10px;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">
<select class="form-control" id="s1">
</select>
</div>
<div class="col-lg-3">
<select class="form-control" id="s2">
</select>
</div>
<div class="col-lg-3">
<select class="form-control" id="s3">
</select>
</div>
</div>
</div>
<script type="text/javascript">
// 获取页面元素
var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');
var s3 = document.getElementById('s3');
function AJAX(path) {
$.ajax({
type: 'get',
url: path,
dataType: 'json',
success: function(data) {
console.log('请求成功！', data)
for (var i in data) {
s1.options.add(new Option(data[i].p))
}
// 【下拉列表事件】
s1.onchange = function() {
//清空数据
s2.options.length = 0;
s3.options.length = 0;
// 添加数据
var s1_data = this.options[this.selectedIndex].innerText;
for (var i in data) {
if (data[i].p == s1_data) {
for (var j in data[i]) {
if (j != 'p') {
s2.options.add(new Option(data[i][j].c))
}
}
}
}
}
s2.onmouseup = function() {
//清空数据
s3.options.length = 0;
// 添加数据
var s2_data = this.options[this.selectedIndex].innerText;
// console.log(s2_data)
for (var i in data) {
if (data[i].p == s1.options[s1.selectedIndex].innerText) {
for (var j in data[i]) {
if (j != 'p') {
if (data[i][j].c == s2.options[s2.selectedIndex].innerText) {
for (var k in data[i][j]) {
if (k != 'c') {
s3.options.add(new Option(data[i][j][k]))
}
}
}
}
}
}
}
}
},
error: function() {
console.log('请求失败！')
}
})
}
AJAX('provcityarea.json');
</script>
</body>
</html>
4 实现效果展示
三级下拉列表