Hierselectプラグインの作成

HierselectのjQueryプラグインを作成した。
Hierselectというのは、例えばプルダウンで大、中、小カテゴリを選択する際に、
大カテゴリの選択によって中カテゴリプルダウンの中身を属するもののみに更新し、
さらに中カテゴリの選択によって小カテゴリのプルダウンの中身を更新、
のような機能。

他にも同様のプラグインがあったのだが、
phpで作成したselectタグではちょっと使いにくい部分があったので作成した。

GitHub - dala00/jquery-hierselect: Simple jquery hierSelect plugin

上記のスクリプトさえ読み込んでおけば、
javascriptで設定する必要は無くHTMLだけで動作させることができる。
サンプルは下記。

https://dala00.github.io/jquery-hierselect/

下記のような感じでdata属性を追加するだけで良い。

<!-- parent -->
<select id="parent" data-hier-target="#child" data-hier-name="parent-id">
<option value="1">Fruit</option>
<option value="2">Animal</option>
</select>

<!-- child -->
<select id="child">
<option></option><!-- you can use empty option -->
<option value="1" data-parent-id="1">Apple</option>
<option value="2" data-parent-id"=1">Orange</option>
<option value="3" data-parent-id="2">Dog</option>
<option value="4" data-parent-id="2">Cat</option>
</select>

CakePHPで利用

本題として、CakePHPで簡単に動作させたかったというのがある。
CakePHPでは通常のリスト配列でなく、
['text' => '....', 'value' => '...', 'data-category-id' => ***]
の配列を渡せば良い。

この２つを組み合わせることで簡単に(?)Hierselectを動作させることができるようになる。
プロジェクトごとに何度も書くのが面倒なのでプラグイン公開してみただけ。