使用David Stutz的Bootstrap Multiselect初始化时触发prop未定义错误

我之前也碰到过类似的问题，结合你描述的场景，这个错误本质是组件初始化时试图访问一个未定义的jQuery对象的prop方法，下面是几个针对性的排查和解决步骤：

• 确认DOM元素存在且选择器正确
  这个错误最常见的诱因是初始化代码执行时，目标<select>元素还没加载到DOM中，或者选择器拼写错误：

  • 一定要把初始化代码放在$(document).ready()回调里，或者放在页面底部（所有HTML元素之后）：

    $(document).ready(function() {
        // 先验证选择器是否能找到目标元素
        const $select = $('#your-select-element-id');
        console.log('找到的select元素数量：', $select.length); // 输出应为1，否则检查选择器
        if ($select.length) {
            $select.multiselect();
        }
    });
    

  • 仔细核对<select>元素的id或class，确保没有拼写错误。

• 检查jQuery与组件的版本兼容性
  Bootstrap Multiselect对jQuery版本有明确要求，不同版本的组件适配的jQuery版本差异很大：

  • 如果使用的是jQuery 3.x及以上版本，请确保搭配最新稳定版的Bootstrap Multiselect，旧版本组件可能不兼容jQuery 3.x的API变化。
  • 如果是旧版本的组件，试试降级到jQuery 2.x版本测试。
  • 务必保证页面只加载一个jQuery版本！可以在浏览器控制台输入jQuery.fn.jquery查看当前生效的版本，避免多个版本冲突覆盖。

• 验证HTML结构符合组件要求
  组件要求目标元素是标准的多选下拉框，必须包含multiple属性：

  <!-- 正确的结构示例 -->
  <select id="my-multiselect" multiple="multiple">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
  </select>
  

  如果缺少multiple属性，组件无法识别为多选控件，很可能触发内部逻辑错误。

• 排查其他JS代码的干扰
  有时候其他脚本会修改jQuery的全局变量（比如使用$.noConflict()），导致$符号失效：

  • 尝试用jQuery代替$调用组件：

    jQuery('#your-select-id').multiselect();
    

  • 检查页面中是否有其他脚本覆盖了jQuery的prop方法，或者修改了DOM元素的属性。

• 尝试重置组件文件
  如果以上都没问题，可能是你当前使用的组件JS文件损坏或版本不完整：

  • 重新下载最新的Bootstrap Multiselect源码，替换现有的bootstrap-multiselect.js和bootstrap-multiselect.css文件。

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