使用 HTML5 data-* 属性初始化 Javascript Select2 控制器
Posted
技术标签:
【中文标题】使用 HTML5 data-* 属性初始化 Javascript Select2 控制器【英文标题】：Initialize Javascript Select2 controller using HTML5 data-* attributes 【发布时间】：2017-01-27 08:57:45 【问题描述】：我正在尝试管理 select2 library 以增强本地人选择 html 控件的功能。
根据官方文档（非常压缩），它说要使用 select2，您只需要下载它们的 CSS 和 javascript 文件，也就是说（并且隐含地假设您需要 jQuery）。
所以，有一种方法可以使用HTML5 data attributes 初始化选择，但我不明白；我试图效仿他们的榜样。也许我在这里遗漏了一些重要的注意事项。
这是我想要做的 HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<h1>Hello Select2</h1>
<div>
<select multiple id="a_select" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
还有一个指向 plunker 的链接，以准备一个实时示例。 https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview
PS：我可以通过 JavaScript 达到预期的效果，但是当我只是按照官方网站上的示例时不知道什么不起作用，这很烦人。
【问题讨论】：
【参考方案1】：您没有在任何地方初始化 Select2...data-* 属性让您可以覆盖默认配置，但您仍然需要启动插件：
<script>$('select').select2();</script>
https://plnkr.co/edit/RPObSPVl8jlZgtedsK38?p=preview
【讨论】：
好吧，我明白了，这是可行的......但文档没有具体说明您必须使用 javascript。 Yes it does。更不用说，every single example。 sorry Adnré，但在示例中并没有说清楚，因此您可以说隐含信息....您将不得不原谅我，但是使用其他框架时您会发现实际上可以将 html5 数据属性与 javascript 一样归档所需的效果。例如：bootstrap-datepicker.readthedocs.io/en/latest。我想，在现在的日子里，完成文档不会伤害任何人。这是题外话，但我有一点。接受与否，由你决定。 我不明白你的意思。在您最初的问题和现在在您的引导程序“计数器”示例中，都有非常容易找到的 explicit 指令。不要仅仅因为没有逐字重复您可能碰巧遇到的每个代码 sn-p 或示例，就将无法阅读所有相关信息称为“不完整的文档”... 这是一个建议，andré，文档旨在直截了当，但为了简单起见，它们缺少要点。例如，他们忘了提到你必须包含 jquery 才能开始，你可能会说这是微不足道的，但现在有一些库（至少是 Angular js）附带 lite 版本的 jquery，如果你不这样做包括。我的意思是，这就是一部作品，如果您声称自己是直截了当的，那么您应该绝对清楚，上下文很重要。是我的观点。我们可以在另一个话题中愉快地讨论这个！无论如何，谢谢你的帮助！以上是关于使用 HTML5 data-* 属性初始化 Javascript Select2 控制器的主要内容，如果未能解决你的问题，请参考以下文章
对旧版浏览器使用 HTML5 的“data-*”属性有啥问题吗？