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

Question

我正在尝试管理 select2 library 以增强本地人 select html 控制的能力。

根据官方文档（非常压缩），它说使用 select2 你只需要下载它们 CSS 和 JavaScript 文件，也就是说（还有，隐含地假设，你需要 jQuery).

所以，有一种使用 HTML5 data attributes 初始化 select 的方法，但我不明白；我正在努力效仿他们的榜样。也许我在这里遗漏了一些重要的注意事项。

这是我正在尝试做的 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>

还有一个 link 可以搞砸，准备一个活生生的例子。 https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview

PS：我认为 JavaScript 可以达到预期的结果，但是当我只是按照官方网站上的示例操作时不知道什么不起作用是很烦人的。

Answer 1

您没有在任何地方初始化 Select2...data-* 属性让您可以覆盖默认配置，但您仍然需要启动插件：

<script>$('select').select2();</script>

https://plnkr.co/edit/RPObSPVl8jlZgtedsK38?p=preview

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

Initialize Javascript Select2 controller using HTML5 data-* attributes

html

javascript

jquery-select2