以下是一个简单的
jquery+
ajax+js三级下拉菜单的示例代码：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>三级下拉菜单</title>
<script src="https://code.
jquery.com/
jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcdn.net/
ajax/libs/layer/3.1.1/layer.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="select-box">
<select class="select-1"></select>
<select class="select-2"></select>
<select class="select-3"></select>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```css
.select-box select {
padding: 5px;
font-size: 16px;
border: none;
background-color: #f2f2f2;
margin-right: 10px;
}
.select-box select:last-child {
margin-right: 0;
}
```
JS代码：
```js
$(document).ready(function(){
// 定义省市区数据
var data = {
"provinces": [
{
"name": "北京市",
"cities": [
{
"name": "北京市",
"areas": [
{name:'东城区'},
{name:'西城区'},
{name:'朝阳区'},
{name:'丰台区'},
{name:'石景山区'},
{name:'海淀区'},
{name:'门头沟区'},
{name:'房山区'},
{name:'通州区'},
{name:'顺义区'},
{name:'昌平区'},
{name:'大兴区'},
{name:'怀柔区'},
{name:'平谷区'},
{name:'密云县'},
{name:'延庆县'}
]
}
]
},
{
"name": "江苏省",
"cities": [
{
"name": "南京市",
"areas": [
{name:'玄武区'},
{name:'白下区'},
{name:'秦淮区'},
{name:'建邺区'},
{name:'鼓楼区'},
{name:'下关区'},
{name:'浦口区'},
{name:'栖霞区'},
{name:'雨花台区'},
{name:'江宁区'},
{name:'六合区'},
{name:'溧水县'},
{name:'高淳县'}
]
},
{
"name": "苏州市",
"areas": [
{name:'姑苏区'},
{name:'相城区'},
{name:'吴中区'},
{name:'虎丘区'},
{name:'吴江区'},
{name:'常熟市'},
{name:'张家港市'},
{name:'昆山市'},
{name:'太仓市'}
]
}
]
},
{
"name": "浙江省",
"cities": [
{
"name": "杭州市",
"areas": [
{name:'上城区'},
{name:'下城区'},
{name:'江干区'},
{name:'拱墅区'},
{name:'西湖区'},
{name:'滨江区'},
{name:'萧山区'},
{name:'余杭区'},
{name:'富阳区'},
{name:'桐庐县'},
{name:'淳安县'},
{name:'建德市'},
{name:'临安市'}
]
},
{
"name": "宁波市",
"areas": [
{name:'海曙区'},
{name:'江东区'},
{name:'江北区'},
{name:'北仑区'},
{name:'镇海区'},
{name:'鄞州区'},
{name:'象山县'},
{name:'宁海县'},
{name:'余姚市'},
{name:'慈溪市'},
{name:'奉化市'}
]
}
]
}
]
};
// 初始化省份列表
var provinceList = '';
for (var i = 0; i < data.provinces.length; i++) {
provinceList += '<option value="' + i + '">' + data.provinces[i].name + '</option>';
}
$('.select-1').append(provinceList);
// 初始化城市列表
$('.select-1').change(function(){
var index = $('.select-1 option:selected').val();
var cityList = '';
for (var i = 0; i < data.provinces[index].cities.length; i++) {
cityList += '<option value="' + i + '">' + data.provinces[index].cities[i].name + '</option>';
}
$('.select-2').empty().append(cityList);
$('.select-3').empty();
});
// 初始化区县列表
$('.select-2').change(function(){
var index1 = $('.select-1 option:selected').val();
var index2 = $('.select-2 option:selected').val();
var areaList = '';
for (var i = 0; i < data.provinces[index1].cities[index2].areas.length; i++) {
areaList += '<option value="' + i + '">' + data.provinces[index1].cities[index2].areas[i].name + '</option>';
}
$('.select-3').empty().append(areaList);
});
// 提交表单
$('#submit').click(function(){
var province = $('.select-1 option:selected').text();
var city = $('.select-2 option:selected').text();
var area = $('.select-3 option:selected').text();
if (province == '' || city == '' || area == '') {
layer.msg('请选择完整的省市区');
return false;
} else {
layer.msg('您选择的地址是：' + province + ' ' + city + ' ' + area);
return false;
}
});
});
```
这个示例代码使用了一个名为layer的UI库来展示提示信息，如果您没有使用过可以直接去官网下载使用。
2971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
