社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
网上有很多的DJANGO下拉三级联动，但是都涉及到数据库回显数据操作，操作复杂，本例子是把下拉数据写在JS中，很简单，不需要修改后台太多文件，最下面是一个正常的HTML下拉三级联动文件，我们在这个文件的基础之上，把它修改放到DJANGO后台之中去，步骤如下
1.建立一个APP，例如news
2.news文件夹下面models里面建立class article,内容如下
class Article(models.Model):
name = models.CharField('标题', max_length=256)
country = models.CharField('国家', max_length=256)
province = models.CharField('省份', max_length=256)
city = models.CharField('城市', max_length=256) 代码没有写全，只摘要重要部分，其它通用部分没有写
3、news文件夹下admin文件内容如下
from django.contrib import admin
from .models import Article
from django import forms
class ArticleForm(forms.ModelForm):
class Meta:
widgets = {
'country': forms.Select(),
'province': forms.Select(),
'city': forms.Select(),
}
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
form = ArticleForm
fields = ('name',('country','province','city'))
list_display = ('name','country','province','city')4、templatesadminnewsarticle文件夹下有个文件，change_form.html，把这个文件打开，加入下面的JS代码，变成如下
{% block admin_change_form_document_ready %}
<script type="text/javascript"
id="django-admin-form-add-constants"
src="{% static 'admin/js/change_form.js' %}"
{% if adminform and add %}
data-model-name="{{ opts.model_name }}"
{% endif %}>
</script>
<script type="text/javascript">
var arrData = {
国内:{北京: ['北京'],
上海: ['上海'],
天津: ['天津'],
重庆: ['重庆'],
浙江: ['杭州','宁波']},
国外:{亚洲: ['日本','韩国','朝鲜'],
欧洲: ['英国','德国','法国','瑞士'],
非洲: ['南非','埃及','加纳','贝宁','苏丹','中非'],
美洲: ['美国','巴西','智利','古巴','海地','秘鲁'],
大洋洲: ['帕劳','斐济','汤加','纽埃','瑙鲁','萨摩亚']},
};
var country = document.getElementById("id_country");
var province = document.getElementById("id_province");
var city = document.getElementById("id_city");
var title = document.getElementById("id_name");
window.onload = function(){
document.getElementById("id_country").options.add(new Option("请选择国家 "));
document.getElementById("id_province").options.add(new Option("请选择省份 "));
document.getElementById("id_city").options.add(new Option("请选择城市 "));
document.getElementById("id_country").addEventListener("change", changeCountry);
document.getElementById("id_province").addEventListener("change", changeProvince);
for(key in arrData){ // 初始化国家的标签，即遍历arrData的key值，添加到下拉列表中
country.options.add(new Option(key, key));
}
var a ="{{ original.country }}" ;
var b ="{{ original.province }}" ;
var c ="{{ original.city }}" ;
$("#id_country").find("option").each(function(){
if($(this).text() == a) {
$(this).attr("selected",true);
}
});
changeCountry();
$("#id_province").find("option").each(function(){
if($(this).text() == b) {
$(this).attr("selected",true);
}
});
changeProvince();
$("#id_city").find("option").each(function(){
if($(this).text() == c) {
$(this).attr("selected",true);
}
});
} //结束
function changeCountry(){
province.length = 1; //当重新选择某个省时，应该把市和区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
city.length = 1; //同上
for(key in arrData[country.value])
//注意字典中key的用法，字典是以键值对{key:value}存储的。country.value就是选择的国家，比如选了国内，那么country.value就是国内。
province.options.add(new Option(key, key)); //options.add(new Option(text,value));
}
function changeProvince(){
city.length = 1; //当重新选择某个省时，应该把市的option清空，因为默认栏是“--请选择--”，故把长度变为1.
for(key in arrData[country.value][province.value]){
var a = arrData[country.value][province.value][key];
city.options.add(new Option(a, a));
}
}
</script>
{% endblock %}如果没有这个文件，哪就到系统安装文件django/contrib/admin/templates/admin目录下拷贝change_form.html文件到我们新建立的templatesadminnewsarticle目录下，
完成以上步骤就OK了
演示结果如下
参考的三级下拉联动HTML文件如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三级联动Demo</title>
</head>
<body>
<span>省</span>
<select id="province" onchange="changeProvince()">
<option value="--请选择--">--请选择--</option>
</select>
<span>市</span>
<select id="city" onchange="changeCity()">
<option value="">--请选择--</option>
</select>
<span>区</span>
<select id="area" onchange="changeArea()">
<option value="">--请选择--</option>
</select>
</body>
<script>
var arrData = {
江西省:{南昌市: ['青山湖区','经开区','东湖区','南昌县'],
吉安市: ['青原区','吉州区','吉安县','泰和县','新干县'],
赣州市: ['河源市','兴国县','yy县','xx县'],
宜春市: ['袁州区','万载县']},
湖南省:{邵阳市: ['邵阳县','1区','2区'],
长沙市: ['1区','2区','3区','4区'],
岳阳市: ['5区','6区','7区','8区','9区','10区']},
广东省:{广州市: ['11区','12区','13区'],
东莞市: ['厚街镇','14区','15区','16区','17区'],
中山市: ['18区','19区','20区','21区']},
江苏省:{苏州市: ['22区','23区','24区','25区','26区'],
徐州市: ['27镇','28区','29区','30区'],
镇江市: ['31区','32区','33区','34区']}
};
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
window.onload = function(){
for(key in arrData){ // 初始化省份的标签，即遍历arrData的key值，添加到下拉列表中
province.options.add(new Option(key, key));
}
}
function changeProvince(){
city.length = 1; //当重新选择某个省时，应该把市和区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
area.length = 1; //同上
for(key in arrData[province.value])
//注意字典中key的用法，字典是以键值对{key:value}存储的。province.value就是选择的省，比如选了江西省，那么province.value就是江西省。
city.options.add(new Option(key, key)); //options.add(new Option(text,value));
}
function changeCity(){
area.length = 1; //当重新选择某个市时，应该把区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
for(key in arrData[province.value][city.value]){
var a = arrData[province.value][city.value][key];
area.options.add(new Option(a, a));
}
}
</script>
</html>如果不是DJANGO的ADMIN后台使用，可以直接用这个HTML文件作为模版，这样更简单，本文章绝对是原创，是三级联动中最简洁的一篇，本人亲自运行通过。本文的好处是JS处理联动数据，不用读取服务器，减少服务器的压力，没有AJAX交互，前端具体的网站效果可参考我做的网站，特产世界 www.techan.world
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
