技術メモ

後で同じ状況が起こった時に思い出せるように技術的なちょっとしたことをメモする。
同じカテゴリーの他の記事を表示
全記事を表示



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


[重要] 現在、このページで紹介している「uselect」の公開が停止されており、この方法を使用することはできません。申し訳ありません。


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日
最終更新日:





コメント (2)

  1. この記事に出ている「uselect」のソースはおもちでしょうか?
    リンク先が消えていたため、もしありましたら共有いただきたくお願いいたします。

    1. 百瀬さん

      コメントありがとうございます。
      確かにこの記事に出ている「uselect」は今はリンクが切れていますね。(この記事の内容が使えないことは追記しておきます)
      大変申し訳ありません。
      コードも手元に残っておりません(調べてみたところ、アーカイブもなさそうです。。)。
      お力になれず、申し訳ありません。

コメントを残す

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