时间戳

首页 > 解决方案 > 可搜索的选择框库 Select2 无法工作

javascript - 可搜索的选择框库 Select2 无法工作

问题描述

我已经构建了一个网络应用程序，需要构建一个可搜索的选择框。

我使用过 Select2 库：https ://select2.org 。

但是在我的情况下，该库无法工作，没有可搜索的输入显示，Select2 执行的断点也没有被命中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select id='course_for_select' name="course_for_select" style="width:200px;" class="operator">
  <option value="">--Select--</option>
  {% for course in query_results %}
    <option value=" {{ course.title }}">{{ course.title }}</option>
  {% endfor %}
</select>

<script>
  $(document).ready(function() {
    //change selectboxes to selectize mode to be searchable
    $("select").select2();
  });
</script>

我收到错误：未捕获的类型错误：$(...).select2 不是函数

标签： javascripthtmljquery

解决方案

如果你检查控制台，你会看到一个错误

$(...).select2 不是函数

这是因为尽管您将 jquery.min.js 和 select2.min.js 添加到页面中，但在此之后添加了另一个 jQuery 实例，它会覆盖前一个实例并丢失对 Select2 的引用。

要解决此问题，只需删除 jQuery 的第二个版本

$(document).ready(function() {
  //change selectboxes to selectize mode to be searchable
  $("select").select2();
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<select id='course_for_select' name="course_for_select" style="width:200px;" class="operator">
  <option value="">--Select--</option>
  <option value=" {{ course.title }}">{{ course.title }}</option>
</select>

推荐阅读