はじめに

jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。

ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。

TL;DR

  • tags: true を指定すると選択肢を動的に追加できる
  • createTag で選択肢追加時の挙動を制御できる
  • multiple の場合は複数選択しを追加できる
続きを読む

はじめに

jQuery Select2 で、ajax で選択肢を取得する方法方法を調べた。

TL;DR

  • ajax オプション内で設定
  • url, data オプションで API Request に関する設定
  • processResults オプションで API Response を受信した後の処理
  • templateResult, templateSelection オプションで見た目(HTML)の設定
続きを読む

はじめに

jQuery Select2 で、複数選択(multiple)を有効にした場合の、最大選択可能数を設定する方法を調べた。

TL;DR

  • $('xx').select2({maximumSelectionLength: n}) で最大選択可能数を設定できる
  • multiple<select multiple> でも、select2({multiple: "multiple"}) でも良い
  • language: maximumSelected でメッセージをカスタマイズできる
続きを読む

Lozad.js で Lazy Load (非 jQuery)



カテゴリー Programming

はじめに

jQuery を使わずに Lazy Load できる ApoorvSaxena/lozad.js の使い方を整理した。

TL;DR

  • <img class="lozad" src="dummy" data-src="image"> のように指定
    • class="lozad" を追加
    • data-src に Lazy Load 対象画像、src にダミー画像を設定
  • lozad().observe() を実行して Lazy Load 起動(監視処理の起動)
  • IntersectionObserver を使っているので SEO 的にも良い(らしい)
続きを読む

はじめに

jQuery Select2 で、初期値を設定する方法と、クリアをする方法を調べた。

TL;DR

  • $('#mySelect2').val("val").trigger('change'); で初期化
    • multiple なら $('#mySelect2').val(["val1", "val2", ...]).trigger('change');
  • $('#mySelect2').val(null).trigger('change'); でクリア
続きを読む
  • page 1 of 1

r17n


Softwear Engineer


Fukuoka