本文共 3053 字，大约阅读时间需要 10 分钟。

前言

当我们选择项目分类的时候，一个项目下关联多个模块，同时有这两个选项框的时候，需要实现选中一个项目，模块里面自动删除出该项目下的模块，如下图这种

解决基本思路：

ajax请求

关于moles相关的内容就不重复写了，打开后台页面，查看select标签的id值，这个id值就是id_和Fieldname的组合

• selectize.clearOptions()清空内容
• selectize.addOption() 添加数据

$("#id_p_name").change(function (e) {            var mid = $(this).val();            $('#id_m_name')[0].selectize.clearOptions(); //二级select清空选项            $.ajax({                type: "get",                url: "/select_module/?mid=" + mid,                async: true,                beforeSend: function (xhr, settings) {                    xhr.setRequestHeader("X-CSRFToken", $.getCookie("csrftoken"));                },                success: function (data) {                    data = JSON.parse(data.msg)//将JSON转换                    for (var i = 0; i < data.length; i++) {                        var test = {text: data[i].fields.module_name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式                          $('#id_m_name')[0].selectize.addOption(test); //添加数据                    }                },                error: function (xhr, textStatus) {                    console.log(xhr);                    console.log(textStatus);                }            })})

可以先在浏览器上调试下，确保没问题后，再加载js

views试图函数和urls.py配置

views.py写个试图函数，删选对应的数据，返回json

# views.pyfrom django.http import HttpResponse, JsonResponsefrom django.core import serializersimport jsonfrom .models import ModuleName# Create your views here.# 二级联动View函数def select_m(request):    # 通过get得到父级选择项    m_id = request.GET.get('mid', '')    # 筛选出符合父级要求的所有子级，因为输出的是一个集合，需要将数据序列化 serializers.serialize()    modules = serializers.serialize("json", ModuleName.objects.filter(project_info_id=int(m_id)))    # 判断是否存在，输出    if modules:        return JsonResponse({"msg": modules})

urls.py设置一个访问地址

from django.conf.urls import urlfrom django.contrib import adminimport xadminfrom hello import viewsurlpatterns = [    url(r'^xadmin/', xadmin.site.urls),   # xadmin    url(r'^admin/', admin.site.urls),     # 原来的admin    url(r'^select_module/', views.select_m),]

加载js文件

xadmin加载自己写的js文件，可以参考之前写的这篇

注意前面要加个分号(😉,要不然不生效

get_media加载js

xadmin注册的时候，重写get_media方法，添加xadmin.add.select.js

class ApiTestAdmin(object):    list_display = ["name", "url", "type"]    def get_media(self):        # media is the parent's return value (modified by any plugins)        media = super(ApiTestAdmin, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js')        # if self.list_display_links_details:        #     media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css')        # xadmin.list.xxx.js是自己写的js脚本        media += self.vendor('xadmin.add.select.js', 'xadmin.form.css')        return media        # media = super(ControlImage,self).get_media()        # media.add_js(('js/content.js',))    # 这种方法行不通，会报找不到.add_js方法        # return mediaxadmin.site.register(models.ApiTest, ApiTestAdmin)

主要思路参考这篇博客