Select2下拉列表未与源通信
[英]Select2 dropdown not communicating with source
问题描述
I am trying to implement Select2 in my script. 
我正在尝试在脚本中实现Select2。 But when I run my script I still get a normal dropdown. 但是，当我运行脚本时，仍然会看到正常的下拉列表。 Does someone know what is wrong? 有人知道哪里出问题了吗？
I have put the javascript part in the <head> of my website: 我已将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>
In the <body> I have the dropdown: 在<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>
When I run the script I still get a normal dropdown instead of the dropdown with search. 当我运行脚本时，仍然会看到一个正常的下拉列表，而不是带有搜索的下拉列表。 Does someone know what is wrong? 有人知道哪里出问题了吗？
1 个解决方案
解决方案1
1 已采纳 2018-09-09 16:11:02
Based on the code that you provided you have a couple of errors 根据您提供的代码，您会遇到一些错误
You load the css in a script tag (you should load in link tag) from
<script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.css"</script>change to<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />您从<script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.css"</script>中的脚本标签中加载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" />You do not properly close the script tag in select2.js see:
<script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.js"</script>您没有正确关闭select2.js中的脚本标签，请参见： <script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.js"</script>
Also do not load css and js from github . 也不要从github加载css和js。 I have noticed sometimes that github does not send the proper header about the content type of the scripts (ex application/javascript) Better load from a cdn like cdnjs 我注意到有时github不会发送有关脚本内容类型的正确标头（例如，ex application / javascript），更好地从cdnjs等cdn加载
I have made these changes and select2 renders correctly so my new tags that you load in the head were the following 我进行了这些更改，并且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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.