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

Question

我正在尝试管理select2 库以增强本地选择 html 控件的功能。

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

所以，有一种使用HTML5 数据属性初始化选择的方法，但我没有得到它； 我正在努力学习他们的榜样。 也许我在这里遗漏了一些重要的说明。

这是我正在尝试做的 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 实现预期的结果，但是当我只是按照官方网站上的示例进行操作时，不知道什么不起作用，这很烦人。

Answer 1

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

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

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-19 16:09:08

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-19 16:09:08

解决方案1
1 已采纳 2016-09-19 16:09:08