jquery-select2jquery-select2を使い始める


備考

このセクションでは、jquery-select2の概要と、開発者がそれを使用する理由を概説します。

また、jquery-select2内の大きなテーマについても言及し、関連トピックにリンクする必要があります。 jquery-select2のドキュメントは新しくなっているので、それらの関連トピックの初期バージョンを作成する必要があります。

バージョン

バージョンリリースノートのリンク発売日
4.0.3(現在) Select2 4.0.3 2016年5月27日
4.0.2 Select2 4.0.2 2016-03-09
4.0.2 RC1 Select2 4.0.2-rc1 2016-02-14
4.0.1 Select2 4.0.1 2015-11-27
4.0.1 RC1 Select2 4.0.1-rc1 2015-11-10
3.5.4 Select2 3.5.4 2015-08-30
3.5.3 Select2 3.5.3 2015-08-20
**古いバージョンは次の場所にあります: select2 / releases 2015-08-20

Jquery - Select2のインストールとセットアップ

Select2を2つの方法のいずれかに含める/インストールすることができます

  1. あなたのプロジェクトの頭の下のプロジェクトでCDNを直接使用する。

リンク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>
 

注:正しく動作するには、Select2のプロジェクトにJqueryを含める必要があります。

PITFALL:jqueryとSelect2の現在のバージョンが競合しているか、Select2の機能が動作していない場合。次に、select2変数と実装をドキュメント本体$(document).ready(function(){// your select2 code .....})の別のブロックに移動します。

使用方法:以下のように<select> を定義することができます:

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

アプローチ1:

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

アプローチ2:

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

この方法を使用すると、定義されたすべての「選択」コントロールがSelect2の機能を継承することに注意してください。特定のコントロールに対してのみSelect2を使用したい場合は、このステップをスキップし、select2機能を直接使用する独自のコードを作成し、他の選択コントロール用にjquery / javascript機能を個別に使用します。ただし、JQueryの場合はSelect2で操作した値を使用できます。逆の場合も同様です。

'The Basics'のその他の例は、 こちらの 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", "");