HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="../static/js/jquery-3.7.1.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="../static/js/bootstrap.min.js"></script>
<style>
/* 自定义样式 */
.selectpicker {
border-radius: 20px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.selectpicker:hover {
border-color: #66afe9;
box-shadow: 0 2px 8px rgba(102, 175, 233, .6);
}
.bootstrap-select .dropdown-menu {
border-radius: 15px;
margin-top: 5px;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
font-weight: 500;
}
.dropdown-menu > li > a {
padding: 10px 20px;
transition: background 0.3s;
}
.dropdown-menu > li > a:hover {
background: linear-gradient(to right, #f8f9fa, #e9ecef);
color: #333;
}
</style>
</head>
<body>
地址:
<select id="se1">
<option>--请选择--</option>
</select>省
<select id="se2">
<option>--请选择--</option>
</select>市
<select id="se3">
<option>--请选择--</option>
</select>县
{#<div class="container" style="margin-top: 30px;">#}
{# <div class="row">#}
{##}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se" class="selectpicker form-control" data-style="btn-primary" title="-- 请选择省份 --">#}
{# {% for province in provinces %}#}
{# <option value="{{ province.id }}"#}
{# {% if province.id == selected_id %}selected{% endif %}>#}
{# {{ province.name }}#}
{# </option>#}
{# {% endfor %}#}
{# {% for province in provinces %}#}
{# <option value="{{ province.id }}">{{ province.name }}</option>#}
{# {% endfor %}#}
{# </select>#}
{# </div>#}
{# </div>#}
{##}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se1" class="selectpicker form-control" data-style="btn-success" title="-- 请选择城市 --">#}
{# </select>#}
{# </div>#}
{# </div>#}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se2" class="selectpicker form-control" data-style="btn-info" title="-- 请选择区县 --">#}
{# </select>#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</div>#}
<script>
//页面就绪函数
$(function () {
//初始化值 把省份查询出来
$.ajax({
url: "/three/",
dataType: "json",
type: "post",
data: {
method: "get1"
},
success: function (date) {
console.log(date);
//清空select 下拉框
// $("#se1").children().not(":eq(0)").remove();
//遍历数据
for (var i = 0; i < date.length; i++) {
console.log(date[i].name);
$("#se1").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");
}
}
});
});
//下拉框2 当下拉框 省1内容发生改变，我就执行
$("#se1").change(function () {
//你选择是那个省 用来当做父id
var id = $("#se1").val();
// alert("下拉框被改变" + id);
$.ajax({
url: "/three/",
type: "post",
data: {
method: "get",
id: id
},
dataType: "json",
success: function (date) {
//清空select 下拉框
$("#se2").children().not(":eq(0)").remove();
$("#se3").children().not(":eq(0)").remove();
//遍历数据
for (var i = 0; i < date.length; i++) {
console.log(date[i].name);
//追加
$("#se2").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");
}
}
});
});
//下拉框3 当下拉框2内容发生改变，我就执行
$("#se2").change(function () {
var id = $("#se2").val();
$.ajax({
url: "/three/",
type: "post",
data: {
method: "get3",
id: id
},
dataType: "json",
success: function (date) {
//清空select 下拉框
$("#se3").children().not(":eq(0)").remove();
//遍历数据
for (var i = 0; i < date.length; i++) {
console.log(date[i].name);
$("#se3").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");
}
}
});
});
</script>
</body>
</html>
python
from django.db import models
class City(models.Model):
name = models.CharField(max_length=50)
province = models.ForeignKey('Province', models.DO_NOTHING)
class Meta:
managed = False
db_table = 'city'
class District(models.Model):
name = models.CharField(max_length=50)
city = models.ForeignKey(City, models.DO_NOTHING)
class Meta:
managed = False
db_table = 'district'
class Province(models.Model):
name = models.CharField(max_length=50)
class Meta:
managed = False
db_table = 'province'
python
def three(request):
global data
if request.method == "GET":
print("跳转页面")
return render(request, "三级联动.html")
else:
print("post请求")
method = request.POST.get("method")
print("[POST] 收到method参数:", method) # 调试关键参数
if method == "get1":
provinces = Province.objects.all()
print("[get1] 省份数据:", provinces) # 验证数据格式 因为QuerySet对象本身不可序列化。所以必须先将其转换为列表或类似结构。
data = [{'id': p.id, 'name': p.name} for p in provinces]
print(data)
# 建议所有数据接口返回统一格式
return JsonResponse(data, safe=False) # 必须转为列表 + safe=False
elif method == 'get':
print("[POST] 收到method参数:", method)
parent_id = request.POST.get('id')
cities = City.objects.filter(province=parent_id)
data = [{'id': c.id, 'name': c.name} for c in cities]
return JsonResponse(data, safe=False)
elif method == 'get3':
print("[POST] 收到method参数:", method)
parent_id = request.POST.get('id')
areas = District.objects.filter(city=parent_id)
data = [{'id': a.id, 'name': a.name} for a in areas]
return JsonResponse(data, safe=False)
python
urlpatterns = [
path('three/', views.three),
]