使用Select2实现胶囊式多选框时出错，求排查解决

核心问题：脚本加载顺序错误 #

Select2是基于jQuery的插件，必须先加载jQuery，再加载Select2的JS文件。你的代码里把Select2的JS放在了jQuery前面，导致Select2无法找到依赖的jQuery对象，直接触发报错。

修复后的完整代码 #

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- 优先加载jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 再加载Select2的JS文件 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  </head>
  <body>
    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>

    <!-- 初始化脚本放在DOM元素之后，确保能找到目标控件 -->
    <script>
      $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
      });
    </script>
  </body>
</html>

额外说明 #

• 初始化代码需放在jQuery、Select2、目标DOM元素之后，避免出现依赖未加载或DOM未就绪的问题。
• 你要的胶囊式（pillbox）多选样式是Select2默认的多选形态，只要给select标签加上multiple="multiple"属性即可生效，无需额外配置。

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