Question

我正在尝试在脚本中实现Select2。但是，当我运行脚本时，仍然会看到正常的下拉列表。有人知道怎么了吗？

我已将javascript部分放在我网站的<head>中

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script type="text/javascript">
    // Setting default configuration here or you can set through configuration object as seen below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
    allowClear: true, // Adds X image to clear select
    closeOnSelect: true, // Only applies to multiple selects. Closes the select upon selection.
    placeholder: 'Select...',
    minimumResultsForSearch: 15 // Removes search when there are 15 or fewer options
});

$(document).ready(

function () {

    // Single select example if using params obj or configuration seen above
    var configParamsObj = {
        placeholder: 'Select an option...', // Place holder text to place in the select
        minimumResultsForSearch: 3 // Overrides default of 15 set above
    };
    $("#singleSelectExample").select2(configParamsObj);
});
</script>
</head>

在<body>中，我有下拉列表：

<select id="singleSelectExample">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

当我运行脚本时，仍然会看到一个正常的下拉列表，而不是带有搜索的下拉列表。有人知道怎么了吗？

Answer 1

根据您提供的代码，您会遇到一些错误

您将css加载到脚本标签中（应加载到链接标签中）来自<script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.css"</script> 更改为<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
您没有正确关闭select2.js中的script标签看到： <script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.js"</script>

也不要从github加载css和js。我有时注意到github没有发送有关脚本内容类型的正确标头（例如application / javascript）更好地从cdnjs这样的CDN加载

我进行了这些更改，并且select2正确渲染因此，您在头部加载的新标签如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

Select2下拉列表未与源通信

1 个答案: