jquery-select2jquery-select2入門


備註

本節概述了jquery-select2是什麼,以及開發人員可能想要使用它的原因。

它還應該提到jquery-select2中的任何大型主題,並鏈接到相關主題。由於jquery-select2的文檔是新的,您可能需要創建這些相關主題的初始版本。

版本

發行說明鏈接發布日期
4.0.3(當前) 選擇2 4.0.3 2016年5月27日
4.0.2 選擇2 4.0.2 2016年3月9日
4.0.2 RC1 選擇2 4.0.2-rc1 2016年2月14日
4.0.1 選擇2 4.0.1 2015年11月27日
4.0.1 RC1 選擇2 4.0.1-rc1 2015年11月10日
3.5.4 選擇2 3.5.4 2015年8月30日
3.5.3 選擇2 3.5.3 二零一五年八月二十日
**舊版本可在以下位置找到: 選擇2 /發行 二零一五年八月二十日

Jquery - Select2安裝和設置

您可以通過以下兩種方式之一包含/安裝Select2

  1. 直接在項目主題部分的項目中使用CDN。

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"/>
 
  1. 將代碼下載到本地計算機並將其包含在項目中。它看起來應該是這樣的在此處輸入圖像描述

然後將這些行包含在html頁面的head部分中

  <link href="select2.min.css" rel="stylesheet" />
  <script src="select2.min.js"></script>
 

注意:您需要在項目中包含Jquery才能使Select2正常工作。

PITFALL:如果當前版本的jquery和Select2存在衝突,或者Select2功能不起作用。然後將select2變量和實現移動到單獨的文檔體塊$(document).ready(function(){// your select2 code .....});

使用方法:您可以按如下方式定義<select>

<select id="select2_example">
    <option>Test</option>
</select>
 

Approach1:

      var _mSelect2 = $("#select_example").select2();
 

Approach2:

  <script type="text/javascript">
      $('select').select2();
  </script>
 

請注意,使用此方法,所有定義的“選擇”頁面控件都將繼承Select2的功能。如果您只想對某些控件使用Select2,請跳過此步驟並編寫自己的代碼以直接使用select2功能,並將jquery / javascript功能分別用於其他選擇控件。但是,您可以使用通過Select2操縱Jquery的值,反之亦然。

“基礎知識”的更多示例可以在這裡的Select2 GIT文檔中找到

Select2 GIT項目就在這裡 。請瀏覽Select2 Github網站了解該產品的詳細功能。

清除Select2下拉列表的選定元素。

為了清除使用Select2 下拉列表選擇的那些值,我們可以使用empty()函數。

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
 

可以使用Jquery重置下拉列表。

$("#select2_example").empty();
 

它也可以重置如下。

$("#select2_example").select2("val", "");