[Javascript] serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

入力フォームにおけるselectタグは、一覧項目からの選択をする要素として使用されますが、コーディングセットをする時に比較的面倒くさい作業が多いのが難点です。
 

input項目とは別にselectタグのcssをデザイン記述する際に、色々と成約が違うために、思ったとおりのデザインが構築できずにイライラした事があるコーダーもいるのではないでしょうか?
 

selected属性を付けてデフォルト選択項目の表示をする際のjsやphpなどでのプログラミングでのあまり気持ちよくない書き方などは、エンジニアとしてはストレスが溜まる作業です。(僕だけかもしれませんが・・・)
 

こんなselectタグを使わずに、inpuptタグをselectタグの様に使えるようにするライブラリを作ってみました。

pulldown.jsについて

このライブラリは、selectタグではなくinputタグにプルダウンメニューを追加表示して、その選択をすることでinputタグに文字列を代入することができる、見た目的にも、機能的にもselectタグさながらの機能を実現することができる要素を実現しました。
 

またselectタグでは、項目内に無いデータは入力(送信)できず、「その他」を選んで、別途入力フォームが現れるような特殊処理をする事が多いのですが、このライブラリを使えば、項目外の文字列も入力して送信することができるようになります。
 

また、selectrタグはkey=valueとして見た目はvalue(text)値が表示されていますが、サーバーに送信されるのは、key(id)値のみになりますが、そのどちらも送信することが可能になります。
 

ソースコード

 

 

Github

https://github.com/yugeta/pulldown.js

実装方法

1. タグの設置

htmlのheadタグ内または、ページの上位に下記のタグを設置
 

 

ファイル名の箇所は階層に応じたパスを記述してください。
 

2. プルダウン設置

対象の入力フォーム記述よりも下方の位置にサンプルのようなscriptタグを書き込んでください。
 

 

解説

datas : 事前にkeyとvalueの値を配列にして当て込んでください。
input_match , branc_view : プルダウンの表示方式です。サイトによってポリシーが違う時に変更して使用してください。
elements : 同じデータを使っていくつでも入力フォームに対応できます。
attach , selected , candeled : 各種イベントの時の任意プログラムをセットできます。
 

elementsで指定する入力フォームは、key(id)とvalueをセットにしていますが、必ずしもkeyが必要ではなく、valueのみでも使用できます。
 

このプルダウン機能を使うと、実際に受け取り側のサーバープログラムで、色々な処理を追加して対応することもできるので、使用方法は無限大です。
 

Githubでcloneした際にくっついてくる、sample.htmlを参考にしてもらえるとなんとなく理解してもらえるかと思います。
 

ページ内に複数のデータ群(プルダウンタグ)が必要な場合は、new宣言をその数分行ってもらえれば、いくつでも対応可能です。
 

入力フォームもこうして進化していく人も必要ですね。
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です