2018-10-31に更新

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' => ***]
の配列を渡せば良い。

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント