select2.js 未显示结果，如 Django 示例

Posted 2023-05-07

【中文标题】select2.js 未显示结果，如 Django 示例

【英文标题】：select2.js not showing results as in example with Django

【发布时间】：2020-01-25 09:12:58

【问题描述】：

我想让 Select2.js 与 Django 一起工作。有 django-select2 可用，但对于我正在做的事情，作者建议我使用原生 Select2。

我在这里指的是基本代码示例https://select2.org/getting-started/basic-usage

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<!--Select2.js-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="js-example-basic-multiple" multiple="multiple" name="lv0">
  <option value="US">US</option>
  <option value="UK">UK</option>
</select>
    <script type="text/javascript">
$(document).ready(function() 
    $('.js-example-basic-multiple').select2(
        placeholder: 'Select an Lv0'
    );
); 
</script>

但是，我只在下面。

控制台日志如下。我不确定是不是因为未加载 select2 文件？我将它们添加到项目的 bower_components 文件夹中，但无法使用本地路径成功引用它们，因为错误显示找不到文件。

jquery.min.js:2 jQuery.Deferred exception: $(...).select2 is not a function TypeError: $(...).select2 is not a function
    at htmlDocument.<anonymous> (http://localhost:8000/test3:45:37)
    at l (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)
    at c (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).select2 is not a function
    at HTMLDocument.<anonymous> (test3:45)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

我在这里缺少什么？谢谢。

【问题讨论】：

我将您的代码复制到了 Plunker，它按预期工作。您检查控制台是否有错误？

@noamyg 感谢您的回复。更新了问题中的控制台日志。

@noamyg 想通了。谢谢。

【参考方案1】：

只需推迟 select2。

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" defer></script>

感谢Select2() is not a function