Django smart-select联动选择在前端模板失效，Admin面板正常

我之前也踩过smart-select在前端模板不生效的坑，结合你给出的代码，咱们一步步排查解决：

1. 先解决jQuery依赖冲突问题 #

你当前的配置里同时设置了USE_JQUERY_DJANGO = True，又手动引入了外部jQuery，这很容易导致版本冲突或者重复加载，建议二选一：

• 如果想使用Django自带的jQuery，替换外部jQuery的引入为：

  <script type="text/javascript" src="{% static 'admin/js/jquery.js' %}"></script>
  

  同时保持USE_JQUERY_DJANGO = True的配置。
• 如果坚持用外部jQuery，把USE_JQUERY_DJANGO改为False，确保只加载一次jQuery，且在所有smart-select的JS之前加载。

2. 补充Bootstrap JS依赖 #

你只引入了Bootstrap的CSS，但smart-select的联动下拉依赖Bootstrap的JS交互逻辑，需要在jQuery之后、smart-select JS之前加上：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

3. 确保表单字段正确渲染 #

smart-select的联动依赖字段上的特定data-*属性（比如data-chainfield、data-url），这些属性是Django表单自动生成的，不能手动写<select>标签。假设你的表单实例是task_form，要这样渲染字段：

<div class="form-group">
  {{ task_form.type.label_tag }}
  {{ task_form.type }}
</div>
<div class="form-group">
  {{ task_form.site.label_tag }}
  {{ task_form.site }}
</div>

4. 手动初始化smart-select联动逻辑 #

在Django Admin里，smart-select的JS会自动初始化，但前端模板需要手动触发。在页面末尾（或者DOM加载完成后）添加初始化代码：

$(document).ready(function() {
    // 初始化外键联动
    chainedfk.init();
    // 绑定字段事件
    bindfields.init();
});

这段代码必须放在所有smart-select的JS文件之后。

5. 检查URL配置是否正确 #

smart-select的联动需要通过AJAX请求获取数据，所以必须在urls.py里添加它的路由：

from django.urls import path, include

urlpatterns = [
    # ... 你的其他URL配置
    path('chained/', include('smart_selects.urls')),
]

如果路由没配置，前端无法获取联动数据，自然不会生效。

按照以上步骤调整后，应该就能解决前端模板的联动失效问题了。

内容的提问来源于stack exchange，提问作者marisha_ok