选择2下拉列表不与源通信

我正在尝试在我的脚本中实现 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>

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

根据您提供的代码，您有几个错误

您将 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 type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.js"</script>

也不要从 github 加载 css 和 js。我注意到有时 github 不会发送有关脚本内容类型的正确标头(例如应用程序/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>

相关内容

最新更新

热门标签：