jQueryライブラリでサジェスト機能を実現！Select2の基本的な使い方

#プログラム #JavaScript

記事をシェア：

コピー

こんにちは。堀部です。

jQueryのライブラリであるSelect2を最近結構使っていたので、基本的な機能を紹介したいと思います。

準備

CDNのサイトからリンクを取得して以下のように記述してください。
バージョンの部分は必要に応じて変更してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

基本的な使い方

以下のように.select2()で初期化するだけでセレクトボックスの見た目が変わり、サジェスト入力が可能なセレクトボックスになります。

    <script type="text/javascript">
      $(document).ready(function() {
        $('.select2').select2();
      });
    </script>

セレクトボックスの幅を変える

セレクトボックスの幅を固定したい場合や、画面のサイズに合わせて可変にしたい場合はwidthオプションを使います。

    <script type="text/javascript">
      $(document).ready(function() {
        $('.select2').select2({width: '100%'});　// 画面サイズに合わせる
        $('.select2').select2({width: '100px'});　// pxで横幅を固定する
      });
    </script>

選択した値をクリアする

選択した値をクリアしたい場合はallowClearオプションを使用します。同時にplaceholderオプションもつける必要があります。

    <script type="text/javascript">
      $(document).ready(function() {
        $('.select2').select2({placeholder: '', allowClear: true});
      });
    </script>

セレクトボックスに初期値を設定する

Select2のセレクトボックスに初期値を設定します。.val()にnullを渡すと選択がクリアされます。

    <script type="text/javascript">
      $(document).ready(function() {
        $('.select2').val($('#id').val()).trigger('change');
        $('.select2').val(null).trigger('change');
      });
    </script>

Select2の選択肢をすべて削除する

現在の選択肢をすべて削除する場合に使用します。動的に選択肢を変更したい場合などに使用し、後続の処理でid,textの形でリストを設定すると選択肢が入れ替わります。

    <script type="text/javascript">
      $(document).ready(function() {
        $('#id').val(null).empty().select2('destroy');　// 選択肢を削除
　　　　$('#product').select2({id: "", text: ""});　// 空の選択肢を設定
      });
    </script>