DJANGO后台ADMIN下拉三级联动，纯JS，没有AJAX数据库回显，目前为止最简单的做法

网上有很多的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 formsclass ArticleForm(forms.ModelForm):class Meta:widgets = {'country': forms.Select(),      'province': forms.Select(),'city': forms.Select(),      }@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):form = ArticleFormfields = ('name',('country','province','city'))list_display = ('name','country','province','city')

4、templates\admin\news\article文件夹下有个文件，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文件到我们新建立的templates\admin\news\article目录下，

完成以上步骤就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

DJANGO后台ADMIN下拉三级联动，纯JS，没有AJAX数据库回显，目前为止最简单的做法相关推荐

html5 下拉框美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法在页面中引入tasty ...
vue 下拉选是多选的，并且回显
下拉选最重要的就是:下拉选的所有选项放在一个变量,选中的选项放在一个变量. 先加载所有选项的数据,再加载选中选项的数据,并且要保证select下拉的ID和v-model里边的id保持一致. 第一.加载 ...
下拉框联动_058-ajax之三级联动案例分析
1 视频中的三级联动案例的功能需求是什么页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县 ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
java 下拉多级联动头像裁剪调用摄像头 SpringMVC mybatis SSM
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
Django后台admin的使用
Django后台admin的使用 1.简述 2.创建数据库表 3.修改admin.py文件 4.启动服务,进入界面 5.自定义表显示内容: 6.自定义动作 1.简述 Django的admin可以提供一 ...
高级查询组件下拉框联动（三）
实现下拉框联动例子. 1.首先在ul中定义省份和城市查询条件. <ul id="dynamicCondition" style="display:none;&quo ...

DJANGO后台ADMIN下拉三级联动，纯JS，没有AJAX数据库回显，目前为止最简单的做法

DJANGO后台ADMIN下拉三级联动，纯JS，没有AJAX数据库回显，目前为止最简单的做法相关推荐

最新文章

热门文章