项目场景：

最近在用django自带的后台管理站点实现CRM系统的实现，虽然自带的管理页面中，对于foreignkey字段，系统会识别成一个下拉框，如下图所示 

---

问题描述：

所以问题来了，如果我的下拉项很多怎么办？一个个看着选肯定不现实，所以就萌生了个想法，能不能加个搜索框，可以搜索选项呢？然后去翻了下django官网，发现在django2.0版本后，提供了一个名为“autocomplete_fields”的属性， 说白了就是在下拉框增加个搜索框，效果如下： 每当点击下拉框展开选项时或者输入关键字搜索时，都会请求后台拿到数据然后展示出来，对于一般的不需要根据其他内容去决定显示哪些选项的，这个属性是个不错的选择 但如果我有两个foriegnkey字段，第二个字段需要根据第一个字段所选的选项决定显示哪些选项，那么autocomplete_fields这个属性就有点力不从心了，所以我决定放弃他，另寻出路

@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); }

---

分析：

我们从官网的描述可以看到，其实这个属性是用了“select2”这个插件，那么，就在想能不能不要django自带的autocomplete_fields属性，自己将这个插件添加进去，然后实现级联的效果呢？结果是可以的

---

解决方案：

我的CRM系统有一个模型BO_Record，里面有两个foreignkey字段customerName ,contacterName class BO_Record(models.Model): customerName = models.ForeignKey(customers,on_delete=models.DO_NOTHING,verbose_name="客户名称") contacterName = models.ForeignKey(contacts,on_delete=models.DO_NOTHING,verbose_name="联系人名称")

然后重写html模板（具体怎么重写，可以百度或者私聊交流下），加入select2的插件

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script> <script> function formatState (state) { var customerName_val = $('#id_customerName').select2("data")[0].text //获取选项的值 if(state.text.indexOf(customerName_val) !== -1){ return state.text } } <--! 初始化下拉框，其中，组件的id要自行改过来--> $(document).ready(function(){ var selectorx = $('#id_customerName').select2({ placeholder: '请选择' }); var selectorx2 = $('#id_contacterName').select2({ templateResult: formatState, // 控制下拉框显示哪些选项 placeholder: '请选择' }); }); </script>

可以看到，在第二个select中添加了个templateResult参数，参数后接了个formatState 函数，formatState函数的作用就是根据第一个下拉框选中的项，在第二个下拉框中将不符合的选项隐藏掉，所以最终出来的效果是这样的 代码和描述可能有点简略，如果有不明白，可以随时私聊，一起交流