はじめに
jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。
ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。
TL;DR
tags: true
を指定すると選択肢を動的に追加できるcreateTag
で選択肢追加時の挙動を制御できるmultiple
の場合は複数選択しを追加できる
jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。
ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。
tags: true
を指定すると選択肢を動的に追加できるcreateTag
で選択肢追加時の挙動を制御できるmultiple
の場合は複数選択しを追加できるjQuery Select2 で、ajax で選択肢を取得する方法方法を調べた。
ajax
オプション内で設定url
, data
オプションで API Request に関する設定processResults
オプションで API Response を受信した後の処理templateResult
, templateSelection
オプションで見た目(HTML)の設定jQuery Select2 で、複数選択(multiple
)を有効にした場合の、最大選択可能数を設定する方法を調べた。
$('xx').select2({maximumSelectionLength: n})
で最大選択可能数を設定できるmultiple
は <select multiple>
でも、select2({multiple: "multiple"})
でも良いlanguage: maximumSelected
でメッセージをカスタマイズできるjQuery を使わずに Lazy Load できる ApoorvSaxena/lozad.js の使い方を整理した。
<img class="lozad" src="dummy" data-src="image">
のように指定class="lozad"
を追加data-src
に Lazy Load 対象画像、src
にダミー画像を設定lozad().observe()
を実行して Lazy Load 起動(監視処理の起動)IntersectionObserver
を使っているので SEO 的にも良い(らしい)jQuery Select2 で、初期値を設定する方法と、クリアをする方法を調べた。
$('#mySelect2').val("val").trigger('change');
で初期化multiple
なら $('#mySelect2').val(["val1", "val2", ...]).trigger('change');
$('#mySelect2').val(null).trigger('change');
でクリア