首页 > 解决方案 > select2.js 未显示结果,如 Django 示例

问题描述

我想让 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)

我在这里想念什么?谢谢。

标签: javascriptdjangojquery-select2

解决方案


只是推迟select2。

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

感谢Select2() 不是一个函数


推荐阅读