jquery select2的问题
Posted
技术标签:
【中文标题】jquery select2的问题【英文标题】:issues with jquery select2 【发布时间】:2017-03-21 18:12:56 【问题描述】:我第一次尝试使用多个 select2,但它不起作用请查看我的代码
$(document).ready(function()
$("#e1").select2();
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="e1" style="width:300px" multiple="multiple">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
【问题讨论】:
请检查您是否在控制台中收到任何错误。 我已经编辑了您的问题,似乎没有任何问题。 脚本标签未关闭 @PunitGajjar 在控制台上是的,它显示 select2() 不是函数 确保正确包含 JS 【参考方案1】:$(document).ready(function()
$("#e1").select2();
);
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
</head>
<body>
<select id="e1" style="width:300px" multiple="multiple">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
您包含的JS
或版本可能有问题,
检查我创建的小提琴。
https://jsfiddle.net/rev8vkcr/
检查我的 HTML 代码。
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script type='text/javascript'>
$(document).ready(function()
$("#e1").select2();
);
</script>
</head>
<body>
<select id="e1" style="width:300px" multiple="multiple">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
【讨论】:
@TalhaSarwar,出了什么问题?【参考方案2】:似乎你没有加载 jQuery,或者其他一些脚本已经控制了全局 $.与select2无关
根据您的代码,这应该是您的文件夹结构。
dist 文件夹必须包含两个文件夹 js 和 css
js 文件夹应该包含 select2.min.js
css 文件夹应包含 select2.min.css
外部 js 文件夹必须包含 jQuery.js
这里的myhtml.html代码是这样的
<html>
<head>
<link rel="stylesheet" href="dist/css/select2.min.css">
<script src="js/jquery.js"></script>
<script src="dist/js/select2.min.js"></script>
<script>
$(function()
$("#e1").select2();
);
</script>
<style>
body
padding: 40px;
</style>
</head>
<body>
<select id="e1" style="width: 300px" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
【讨论】:
@TalhaSarwar 出了什么问题??以上是关于jquery select2的问题的主要内容,如果未能解决你的问题,请参考以下文章
在select2 jquery插件中没有调用initSelection
ASP.NET UpdatePanel 的 Select2 JQuery 问题