Select2 JavaScript 未更改默认选择答案

【问题标题】：Select2 JavaScript not changing select from defaultSelect2 JavaScript 未更改默认选择
【发布时间】：2016-11-01 17:16:50
【问题描述】：

我试图在我的 Asp.net 网站上实现 Select2 JavaScript，但无论我尝试什么，它似乎都没有实现，只是像往常一样显示选择控件。我尝试更改脚本并查看 select2 网站上的示例，但似乎无法理解。

这可能是我猜测的一些小问题，下面是我的代码：

@model AssignerWebTool.Models.CreateUserModel
@{
ViewBag.Title = "Create User";
}
<head>
<title></title>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function () {
$("help").select2();
});
</script>

<select id="help" class="help">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
</body>

【问题讨论】：

检查你的浏览器控制台，看看你是否有任何js错误
啊，上面写着：Uncaught TypeError: $(...).select2 is not a function(...)

标签： javascript asp.net asp.net-mvc jquery-select2

【解决方案1】：

你的 jQuery 选择器是错误的！在你的 DOM 中没有名为 help 的元素。有一个 ID 为 help 的元素。所以你可以使用Id选择器（使用#）

试试这个

$(document).ready(function () {
   $("#help").select2();
});

您还需要确保以正确的顺序加载脚本。您的布局将定义一个 scripts 部分，并且您应该只在同一 scripts 部分中调用页面级脚本。

这应该可行。

<select id="help" class="help">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

@section scripts
{
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  $(function () {

     $("#help").select2();

   });   

}

【讨论】：