Django添加script实现select下拉多选后页面失效问题咨询

现有views.py中的load_clients函数和select标签渲染逻辑无需调整，失效问题由前端依赖缺失和脚本顺序错误导致，修复方案如下：

问题根因 #

• 未引入功能运行必须的依赖库：调用$需要先引入jQuery库，调用multiselect()方法需要先引入Bootstrap核心资源、Bootstrap Multiselect插件的CSS和JS文件，缺失依赖会直接触发JS运行错误，阻塞页面渲染
• 自定义初始化脚本的执行时机早于依赖加载和DOM渲染，也会触发方法未定义异常

修复步骤 #

调整HTML的依赖引入顺序和脚本位置，完整可运行代码如下：

<!DOCTYPE html>
<html>
  <head>
    <!-- 按顺序引入本地部署的依赖资源 -->
    <link rel="stylesheet" href="本地资源路径/bootstrap.min.css">
    <link rel="stylesheet" href="本地资源路径/bootstrap-multiselect.min.css">
    <script src="本地资源路径/jquery.min.js"></script>
    <script src="本地资源路径/bootstrap.min.js"></script>
    <script src="本地资源路径/bootstrap-multiselect.min.js"></script>
  </head>
  <body>
    <select id="ddselect" name="framework[]" multiple class="form-control">
      <option value="----">------</option>
      {% for Client_of_CPA in clients %}
      <option value="{{ Client_of_CPA.pk }}">{{ Client_of_CPA.name }}</option>
      {% endfor %}
    </select>

    <!-- 初始化脚本放在body末尾，确保依赖和DOM都加载完成后再执行 -->
    <script>
      $(document).ready(function(){
        $('#ddselect').multiselect({
          nonSelectedText: '请选择客户',
          enableFiltering: true,
          enableCaseInsensitiveFiltering: true,
          closeOnSelect: false
        });
      });
    </script>
  </body>
</html>

多选取值方法 #

• 表单提交时，后端可直接通过framework参数获取选中值的数组
• 前端动态获取选中值可调用方法：const selectedClients = $('#ddselect').val();，返回值为所有选中项的value组成的数组

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