djangoadmin后台表单改造，多个选项多级联动

问题

django项目采用第三方simlpeui，需要在admin后台增加数据有个选择，choice用list或者枚举类实现，但是无法联动选择，查了很多资料都没法实现。
需要引入js。

当个选择的方式是用choice。
类似省市区联动就需要js写死前端显示

解决办法

1. models里面

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. 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')
    change_form_template = 你的APP下的html  **注意这里看下面例子**  
  change_form_template = 'app/index.html'
  **其宗index.html内容为change_form.html里面的拷贝过来，change_form.html在Django安装的contrib/admin/templates/admin目录下**

3. 在html里面

{% 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 %}

注意把change_form.html从你的Django安装的contrib/admin/templates/admin目录下复制到你的app下不要直接在上面改，因为后期部署会失效