前端：xadmin 实现二级联动

需求：
当选择完语言时，语言等级会根据所选的语言动态生成

思路：

1. 绑定1级（外语）select的change事件，获取当前选中的选项value.
2. 触发一个函数或者ajax去获取过滤后的二级数据.
3. 将获取到的二级数据填充到二级select的option中 （必须使用selectize）

代码：

一、引入js代码

绑定1级select的change事件，必须植入我们自己写的js代码
xadmin提供加载自定义js的方法.
adminx.py中：

     @register(HrUser)
     class ArticleAdmin(object):
            list_display = ['title', "type", 'module', 'author', 'tag', 'visit', 'add_time']
            search_fields = ['module', "type", 'author', 'title', 'introduction', 'content', 'tag', 'visit', 'add_time']
            list_filter = ['module', "type", 'author', 'title', 'introduction', 'content', 'tag', 'visit', 'add_time']
            style_fields = {'content': 'ueditor'}
            readonly_fields = ['visit','like', ]
        def get_media(self):
            media = super().get_media()
            path = self.request.get_full_path()
            if "add" in path or 'update' in path:
                media.add_js([self.static('demo/js/xadmin.js')])
            return media

xadmin.js中：

    window.onload = language_level
    $('#id_language').change(function(){language_level()})
    
    function language_level(){
        var language_text = $('#id_language option:selected').text()
        var language_level_text = $("#id_language_level").text()
        var language_level = $("#id_language_level")
        language_level[0].selectize.clearOptions()
    
        if(language_text=='英语'){
            language_level[0].selectize.addOption({text: '英语四级', value: '英语四级'});
            language_level[0].selectize.addOption({text: '英语六级', value: '英语六级'});
        }

	    else if(language_text=='日语'){
	        language_level[0].selectize.addOption({text: '日语一级', value: '日语一级'});
	        language_level[0].selectize.addOption({text: '日语二级', value: '日语二级'});
	        language_level[0].selectize.addOption({text: '日语三级', value: '日语三级'});
	        language_level[0].selectize.addOption({text: '日语四级', value: '日语四级'});
	        language_level[0].selectize.addOption({text: '日语五级', value: '日语五级'});
	    }
	
	    else if(language_text=='英语/日语'){
	        language_level[0].selectize.addOption({text: '英语四级/日语一级', value: '英语四级/日语一级'});
	        language_level[0].selectize.addOption({text: '英语四级/日语二级', value: '英语四级/日语二级'});
	        language_level[0].selectize.addOption({text: '英语四级/日语三级', value: '英语四级/日语三级'});
	        language_level[0].selectize.addOption({text: '英语四级/日语四级', value: '英语四级/日语四级'});
	        language_level[0].selectize.addOption({text: '英语四级/日语五级', value: '英语四级/日语五级'});
	        language_level[0].selectize.addOption({text: '英语六级/日语一级', value: '英语六级/日语一级'});
	        language_level[0].selectize.addOption({text: '英语六级/日语二级', value: '英语六级/日语二级'});
	        language_level[0].selectize.addOption({text: '英语六级/日语三级', value: '英语六级/日语三级'});
	        language_level[0].selectize.addOption({text: '英语六级/日语四级', value: '英语六级/日语四级'});
	        language_level[0].selectize.addOption({text: '英语六级/日语五级', value: '英语六级/日语五级'});   
	    }
	
	    else{
	        language_level[0].selectize.addOption({text: 'N/A', value: 'N/A'});
	    }
	
	    language_level[0].selectize.setValue(language_level_text)
	}

代码解释：
1、id_language 和id_language_level分别是一级和二级标签的id，如何知道这两个id？

2、前两行就是当页面加载和一级标签值发生变化时，触发language_level（）函数。

3、clearOptions（）是清空select标签的选项

4、addOption（）是给select标签添加选项

5、setValue（）是给selelct标签设置默认值

这里有个坑，之前我的思路是，直接用jquery的语法改写二级标签中的数据，但是每次一点击下拉框，里面的数据又还原成之前的所有数据。
这个时候debug看，network又没有任何请求，说明之前初始化的时候，把数据存到了某个地方，等点击下拉框的时候，数据被重新填充回去。
找了半天，终于发现了原来是selectize插件干的。

阅读selectize.js源码，可以发现提供了一系列api可以使用。

本文是在js中直接对二级标签的select选项进行赋值了，还可以通过ajax请求获取数据后在更新select数据。