需求:
当选择完语言时,语言等级会根据所选的语言动态生成
思路:
- 绑定1级(外语)select的change事件,获取当前选中的选项value.
- 触发一个函数或者ajax去获取过滤后的二级数据.
- 将获取到的二级数据填充到二级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数据。