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

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

jquery

Jquery 选择2下拉列表不与源通信,jquery,jquery-select2,Jquery,Jquery Select2,我正在尝试在脚本中实现Select2。但是当我运行脚本时，我仍然会得到一个正常的下拉列表。有人知道怎么回事吗我已将javascript部分放在我网站的 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.co

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

我已将javascript部分放在我网站的

<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>

在列表中，我有下拉列表：

<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加载到脚本标记中，您应该将其加载到链接标记中

您从Um加载了jQuery库了吗？我也加载了jQuery库请参见第一篇文章中的编辑正确地包含select2脚本。您缺少css和css中的closing>js@CodeThing我更新了我的第一篇帖子。看起来jQuery没有加载。你知道我做错了什么吗？脚本仍然无法处理更改。请参阅：。未加载jquery。请签入codepenhttps://codepen.io/anon/pen/qMpPLb ，它将加载并正确渲染。另外，在JSFIDLE中加载脚本的方式也是错误的。您需要通过资源选项在左侧加载它们。另外，在JSFIDLE中，我已经将脚本包含在参考资料=>中。谢谢问题是我的脚本中有一个旧的引用

<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>