使用 HTML5 data-* 属性初始化 Javascript Select2 控制器答案

【问题标题】：Initialize Javascript Select2 controller using HTML5 data-* attributes使用 HTML5 data-* 属性初始化 Javascript Select2 控制器
【发布时间】：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 达到预期的效果，但是当我只是按照官方网站上的示例时不知道什么不起作用，这很烦人。

【问题讨论】：

标签： javascript html jquery-select2

【解决方案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，如果你不这样做包括。我的意思是，这就是一部作品，如果您声称自己是直截了当的，那么您应该绝对清楚，上下文很重要。是我的观点。我们可以在另一个话题中愉快地讨论这个！无论如何，谢谢你的帮助！