技術メモ

後で同じ状況が起こった時に思い出せるように技術的なちょっとしたことをメモする。ベストな解ではない。



[HTML]複数のドロップダウンリストで重複を許さず(ユニーク)に選択してもらう


HTMLのセレクトボックス(selectタグで作れるやつ; ドロップダウンリスト, スピナーなどとも呼ばれる)で同じ候補から順位をつけて選択してほしいときとかにセレクトボックスの中身を共有し、一つ選んだら別のセレクトボックスではその項目を選べないようにしたい。





 

背景

例えば、HTML+PHPで旅行の日程と行き先の希望を取るアンケートを作成する事を考える。
行き先は北海道・東北・中部・近畿・四国・九州から第一から第三希望、出発日を8/11~8/15から第一希望と第二希望選んでもらうとする。

その場合、一番愚直に書いたHTMLは以下のようになるだろう。

しかしこれでは、第一希望、第二希望、第三希望で同じ項目を選べてしまう。

一度選んだ項目はもう選んでほしくない。
もっとUIを工夫すればそういったことはできるだろうがそれは面倒くさいので最低限の実装でなんとかならないかといろいろ調べたところ、簡単に使えるuselectというjQueryのライブラリが見つかった。(HTML標準の機能では実現できなそうだった)





 

uselectの使い方

ここのDownload repositoryからリポジトリをダウンロード、展開してできたscriptsディレクトリをhtml(php)ファイルと同じ階層に置く(読み込めれば同じディレクトリじゃなくても問題ないが)。
headでscriptsフォルダのスクリプトを読み込む。

それから共有するselectタグに同じクラス名を付与する。
後は、以下のスクリプトをhtmlタグ以下に書くだけである。

※classにはselectタグにつけたクラス名を書く。
複数ある場合は複数書けば良い。





 

使用例

先程の背景で話した旅行の日程と行き先の希望を取るアンケートを例にしたときの使用例を書く。scriptsフォルダをhtmlファイルと同じ階層に置いた。

簡単にかけた。
ポイントは行き先のselectタグにはすべてdestというクラス名をつけ、出発日のselectタグにはすべてdayというクラス名をつけたところと、87, 88行目でそれぞれのクラス名を指定していることである。

一度選んだ選択肢はグレーアウトしてきちんと選べなくなっており、期待した動作が得られている。





 
なお、記事投稿日での最新のChrome, Firefox, Edge, IEで動作確認をしたが、同じ選択肢を選べないとう点では全てにおいて正しく動いた。
古いIEでは動かないかもしれない。
もっと簡単で良い方法は無いかなぁ。。。



タグ: ,
投稿日: 2018年8月12日





コメントを残す

回答をお約束することは出来ませんので予めご了承ください。
コメントは承認されると表示されるようになります。
コメントを送信する前に「私はロボットではありません」にチェックを入れて下さい。