使用 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