(0) Total: 0

複数選択型のプルダウン

単一選択のプルダウンを複数選択型に変更する為のTipsです。
複数選択型と言っても従来のselectタグではなく、チェックボックスを
使ったプルダウン表示に変更させる方式です。
（prototype.jsを利用しています）

言葉だけではイメージし難いと思いますので、サンプルを参照してください。

上側に従来のプルダウン、下側に同じ要素の複数選択型プルダウンが表示されています。

複数選択側のほうはプルダウン横にボタンがついており、それを押すと複数選択形式になります。

・選択された値はカンマ区切りでプルダウンの要素の１つに追加されます。（カンマは変更可能）
・デフォルト値が複数設定された場合も問題なく設定されます。
・送信時はカンマ区切りの単一データとして送られるので、explode関数で配列にするなどして利用します。

これは、LIVEPIPE UIというprototype.jsのライブラリの機能を使って実装しています。
LIVEPIPEのサイトに具体的な利用方法は載っていますのでここでは割愛しますが、従来の利用方法ではjavascriptをそこそこ記述する必要があるので、少々面倒でした。

そこで、以下のルールで自動的に複数選択型になるようなjavascriptを作成しました。（ソースが汚いです。。）

１．複数選択に変更したい<select>タグの前後を以下のdivタグで囲む

HTML:

<div class="select_multiple" id="一意の値" style="position:relative;" alt="項目タイトル" width="横幅">
<select>・・・</select>
</div>

２．divの直後に以下のスクリプトを実行する

HTML:

サンプルスクリプト
CakePHPのビューで実装した場合は以下のようなソースになります。(CakePHP1.1系)

HTML:

<div id="fruits_list" class="select_multiple" style="position:relative;" alt="フルーツリスト" width="300">
<?php echo $html->selectTag('Fruit/list2', $list, $html->tagValue('Fruit/list2'));?>
</div>
<script>initSelectMultiple('fruits_list', '<?php echo $html->tagValue('Fruit/list2') ?>');</script>

注意事項
利用時には以下のjavascriptが必要になります
・prototype.js
・scriptaculous.js?load=effects
・livepipe/livepipe.js
・livepipe/selectmultiple.js

Leave a Reply

最近の投稿