使用HTML并且使用ajax实现三级联动添加数据然后查询所添加的信息
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>三级联动</h1>
<form id="form">
<select id="province" name="province">
<option value="">请选择省份</option>
</select>
<select id="city" name="city">
<option value="">请选择城市</option>
</select>
<select id="district" name="district">
<option value="">请选择区县</option>
</select>
<button type="submit">添加数据</button>
</form>
<div id="result"></div>
<script>
$(document).ready(function() {
// 加载省份数据
$.ajax({
url: 'data/provinces.json',
type: 'GET',
dataType: 'json',
success: function(data) {
var options = '';
$.each(data, function(index, province) {
options += '<option value="' + province.code + '">' + province.name + '</option>';
});
$('#province').html(options);
}
});
// 根据选择的省份加载城市数据
$('#province').change(function() {
var provinceCode = $(this).val();
if (provinceCode === '') {
$('#city').html('<option value="">请选择城市</option>');
$('#district').html('<option value="">请选择区县</option>');
return;
}
$.ajax({
url: 'data/cities.json',
type: 'GET',
dataType: 'json',
data: {
provinceCode: provinceCode
},
success: function(data) {
var options = '';
$.each(data, function(index, city) {
options += '<option value="' + city.code + '">' + city.name + '</option>';
});
$('#city').html(options);
$('#district').html('<option value="">请选择区县</option>');
}
});
});
// 根据选择的城市加载区县数据
$('#city').change(function() {
var cityCode = $(this).val();
if (cityCode === '') {
$('#district').html('<option value="">请选择区县</option>');
return;
}
$.ajax({
url: 'data/districts.json',
type: 'GET',
dataType: 'json',
data: {
cityCode: cityCode
},
success: function(data) {
var options = '';
$.each(data, function(index, district) {
options += '<option value="' + district.code + '">' + district.name + '</option>';
});
$('#district').html(options);
}
});
});
// 提交表单
$('#form').submit(function(event) {
event.preventDefault();
var provinceName = $('#province option:selected').text();
var cityName = $('#city option:selected').text();
var districtName = $('#district option:selected').text();
var result = '省份：' + provinceName + '<br>城市：' + cityName + '<br>区县：' + districtName;
$('#result').html(result);
});
});
</script>
</body>
</html>
JavaScript的部分使用了jQuery库来简化AJAX的操作。首先，页面加载完成时，通过AJAX请求加载省份数据，将省份数据填充到省份下拉框中。当选择省份时，会根据选择的省份代码发送AJAX请求加载城市数据，并将城市数据填充到城市下拉框中。当选择城市时，会根据选择的城市代码发送AJAX请求加载区县数据，并将区县数据填充到区县下拉框中。最后，当表单提交时，会获取选择的省份、城市和区县的名称，并将结果显示在页面上。
请注意，上述代码中的URL是示例URL，需要根据实际情况替换为正确的URL。此外，还需要创建对应的省份、城市和区县的JSON数据文件，并在代码中指定正确的文件路径。
例：provinces.json
[
{"code": "110000", "name": "北京市"},
{"code": "120000", "name": "天津市"},
{"code": "130000", "name": "河北省"},
{"code": "140000", "name": "山西省"},
{"code": "150000", "name": "内蒙古自治区"}
// 其他省份数据...
]
例：cities.json
[
{"code": "110100", "name": "北京市"},
{"code": "120100", "name": "天津市"},
{"code": "130100", "name": "石家庄市"},
{"code": "130200", "name": "唐山市"},
{"code": "130300", "name": "秦皇岛市"}
// 其他城市数据...
]
例：districts.json
[
{"code": "110101", "name": "东城区"},
{"code": "110102", "name": "西城区"},
{"code": "110105", "name": "朝阳区"},
{"code": "110106", "name": "丰台区"},
{"code": "110107", "name": "石景山区"}
// 其他区县数据...
]
以上是一个简单的三级联动选择框，可以根据选择的省份、城市和区县查询所添加的信息。具体的实现还需要根据实际需求进行调整和完善
原文地址: https://www.cveoy.top/t/topic/h1rU 著作权归作者所有。请勿转载和采集!