前端：xadmin 实现二级联动

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

思路：

绑定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数据。

前端：xadmin 实现二级联动相关推荐

select三级联动怎么删除前一个的_python测试开发django57.xadmin选项二级联动
前言当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种解决基本思路: 1.写个jqeury脚本监听cha ...
Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）
目录一.先看下app文件目录二.编写models.py样例三.确定二级数据和js内容 1.编写路由urls.py 2.views传递数据,json格式 3.定制js文件四.在adminx.py ...
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
二级联动菜单 select 对象一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回 ...
jq mysql二级联动_jq+php+mysql 实现二级菜单联动
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动. 实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变.实现原理:根据大类的值,通过jQuery把值传给后台P ...
分类二级联动 php,学习猿地-php实现二级联动菜单
php实现二级联动菜单的方法:首先根据大类的值,通过jQuery把值传给后台PHP处理:然后用PHP查询MySQl数据库,得到相应的小类:最后返回JSON数据给前端处理即可. jq+php+mysql ...
vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
JavaScript实现二级联动下拉菜单
最近学习前端js,做了一个二级联动下拉菜单.二级下拉菜单的内容随着一级下拉菜单选项的更改而更改.菜单的内容是手动存在js的数组里的,随便写了几个数据. 效果图: 实现源码: <!DOCTYPE ...

前端：xadmin 实现二级联动

一、引入js代码

前端：xadmin 实现二级联动相关推荐

最新文章

热门文章