jquery获取后台数据进行四级联动,一二级为省市下拉框,三级为区表格且带复选框,四级为街道表格 具体代码
时间: 2024-02-23 11:02:15 浏览: 146
jquery获取后台数据生成下拉框
5星 · 资源好评率100%
以下是一个可能的实现代码,基于 jQuery 和 Bootstrap:
HTML 代码:
```html
<div class="form-group">
<label for="province">省份</label>
<select class="form-control" id="province"></select>
</div>
<div class="form-group">
<label for="city">城市</label>
<select class="form-control" id="city"></select>
</div>
<div class="form-group">
<label>区</label>
<table class="table" id="district"></table>
</div>
<div class="form-group">
<label>街道</label>
<table class="table" id="street"></table>
</div>
```
JavaScript 代码:
```javascript
$(function() {
loadProvince();
});
function loadProvince() {
$.get('/api/province', function(data) {
var options = '';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
}
$('#province').html(options);
loadCity();
});
}
function loadCity() {
var provinceId = $('#province').val();
$.get('/api/city', { provinceId: provinceId }, function(data) {
var options = '';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
}
$('#city').html(options);
loadDistrict();
});
}
function loadDistrict() {
var cityId = $('#city').val();
$.get('/api/district', { cityId: cityId }, function(data) {
var rows = '';
for (var i = 0; i < data.length; i++) {
rows += '<tr><td><input type="checkbox" value="' + data[i].id + '">' + data[i].name + '</td></tr>';
}
$('#district').html('<tbody>' + rows + '</tbody>');
loadStreet();
});
}
function loadStreet() {
var districtIds = $('#district input:checked').map(function() {
return $(this).val();
}).get().join(',');
$.get('/api/street', { districtIds: districtIds }, function(data) {
var rows = '';
for (var i = 0; i < data.length; i++) {
rows += '<tr><td>' + data[i].name + '</td></tr>';
}
$('#street').html('<tbody>' + rows + '</tbody>');
});
}
$('#province').on('change', loadCity);
$('#city').on('change', loadDistrict);
$('#district').on('change', 'input', loadStreet);
```
这段代码假设后台提供了四个 RESTful API,分别是 `/api/province`、`/api/city`、`/api/district` 和 `/api/street`,分别用于获取省份、城市、区和街道数据。这些 API 的返回格式需要和 JavaScript 代码中的数据格式相匹配。具体实现过程可能还需要进行一些修改和优化。
阅读全文