[Javascriptライブラリ] pulldown.jsにmultiple機能を追加

2019年10月8日

Javascript テクノロジー プログラミング

楽しい時に笑って、悲しい時に泣くという事を出来ない人がいるようです。 とにかく人はストレスを貯めると心身ともに良いことが無さそうなので、思いっきり笑って、思いっきり泣ける人というのは、スキルの一つと考えてもいいかもしれませんね。 大声を張り上げる必要は無く、高ぶった感情を他人にぶつける必要もないので、自分の感情を素直に表情や行動に表せるようになると、ストレスは少なくなるようなので、日々何かを擦り削りながら過ごしている人は、参考にしてみてください。 とある方からそんなためになるお話を聞かせてもらいました・・・ 全く関係のない話から始めましたが、以前に作った「pulldown.js」という、入力フォームのselectタグの代替機能に、multipleという、複数選択の機能を搭載したので、そのご紹介です。

新機能紹介

multiple機能(複数選択)は、通常ではあまり使わないのですが、チェックボックスを使うような入力フォームでは、この複数選択機能と同様の役割を果たします。 アンケートなどで、「興味のある項目にチェックを入れてください(複数選択可能)」というような場合に、1つしか選択できないプルダウンでは役割を果たせません。 とりあえず、機能として必要というレベルで追加した機能なのですが、技術的には意外と億が深い内容だったので、バージョンアップ報告をする事にしました。

使い方

前回紹介した記事の使い方に少し変更が入る程度ですが、以下のように記述して利用できます。 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>pull-down-sample</title> <script src="pullDown.js"></script> </head> <body> <h1>pull-down-sample</h1> <input type="text" name="multi_key" placeholder="key"> <input type="text" name="multi_val" placeholder="value"> <select style="width:100px;" multiple="true"> <option>multi-1</option> <option>multi-2</option> <option>multi-3</option> <option>multi-4</option> <option>multi-5</option> </select> <script> var datas = [ {key:1,value:"test-10"}, {key:2,value:"hoge-20"}, {key:3,value:"hage-30"}, {key:4,value:"hage-40"}, {key:5,value:"hage-50"} ]; new $$pullDown({ datas : datas, input_match : "multiple", brank_view : true, readonly : false, multiple_split_string : ",", // 1項目に複数入力する際のsplit文字列 elements : [ { elm_key : "[name='multi_key']", elm_val : "[name='multi_val']" } ] }); </script> </body> </html> githubからDLしてもらったら入っているsample.htmlの必要箇所だけを抜き取った形ですが、"input_match"の値を"multiple"にするだけで、基本的には機能します。 "multiple_split_string"の値は、デフォルトでは","(カンマ)ですが、利用するシステムに合わせて変更することも可能です。 selectタグの代替品なので、入力項目にkey用とvalue用が必要なのですが、submitするのはkey値だけでいいでしょう。 あと付随する機能として、"readonly"というオプションを追加してみました。 これは、複数選択の場合は、任意の値を追加するというケースが少なく、項目に値をinputしてもらっては困るケースが多いと思ったので、デフォルトではfalseで書き込みができる状態ですが、trueにすると、その項目はmultipleの選択はできるが、直接の入力は不可にすることができます。 かなり限定的な機能ですが、pulldown.jsも少しだけバージョンアップして、ますます利用シーンが増えてきて、いよいよformタグの革新が見えてきた感じです。 今後をさらに楽しみにしていてください。

参考サイト

# 前回記事 [Javascript] serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」 # Github https://github.com/yugeta/pulldown.js

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。