[HTML]複数のドロップダウンリストで重複を許さず(ユニーク)に選択してもらう※現在使用不可
[重要] 現在、このページで紹介している「uselect」の公開が停止されており、この方法を使用することはできません。申し訳ありません。
HTMLのセレクトボックス(selectタグで作れるやつ; ドロップダウンリスト, スピナーなどとも呼ばれる)で同じ候補から順位をつけて選択してほしいときとかにセレクトボックスの中身を共有し、一つ選んだら別のセレクトボックスではその項目を選べないようにしたい。
背景
例えば、HTML+PHPで旅行の日程と行き先の希望を取るアンケートを作成する事を考える。
行き先は北海道・東北・中部・近畿・四国・九州から第一から第三希望、出発日を8/11~8/15から第一希望と第二希望選んでもらうとする。
その場合、一番愚直に書いたHTMLは以下のようになるだろう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <title>旅行希望アンケート</title> </head> <body> <p>(前略)</p> <p><b>行き先</b>: <ul> <li>第一希望: <select name="dest" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> <li>第二希望: <select name="dest2" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> <li>第三希望: <select name="dest3" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> </ul> </p> <p><b>出発日</b>: <ul> <li>第一希望: <select name="day1" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> <li>第二希望: <select name="day2" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> <li>第三希望: <select name="day3" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> </ul> </p> <p>(後略)</p> </body> </html> |
しかしこれでは、第一希望、第二希望、第三希望で同じ項目を選べてしまう。
一度選んだ項目はもう選んでほしくない。
もっとUIを工夫すればそういったことはできるだろうがそれは面倒くさいので最低限の実装でなんとかならないかといろいろ調べたところ、簡単に使えるuselectというjQueryのライブラリが見つかった。(HTML標準の機能では実現できなそうだった)
uselectの使い方
ここのDownload repositoryからリポジトリをダウンロード、展開してできたscriptsディレクトリをhtml(php)ファイルと同じ階層に置く(読み込めれば同じディレクトリじゃなくても問題ないが)。
headでscriptsフォルダのスクリプトを読み込む。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> (略) <script type="text/javascript" src='scripts\jquery-1.3.1.min.js'></script> <script type="text/javascript" src='scripts\jquery.optional.min.js'></script> <script type="text/javascript" src='scripts\jquery.uselect.js'></script> (略) </head> (略) </html> |
それから共有するselectタグに同じクラス名を付与する。
後は、以下のスクリプトをhtmlタグ以下に書くだけである。
1 2 3 4 5 |
<script> $(function(){ $.uSelect('select.class'); }); </script> |
※classにはselectタグにつけたクラス名を書く。
複数ある場合は複数書けば良い。
使用例
先程の背景で話した旅行の日程と行き先の希望を取るアンケートを例にしたときの使用例を書く。scriptsフォルダをhtmlファイルと同じ階層に置いた。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <title>旅行希望アンケート</title> <script type="text/javascript" src='scripts\jquery-1.3.1.min.js'></script> <script type="text/javascript" src='scripts\jquery.optional.min.js'></script> <script type="text/javascript" src='scripts\jquery.uselect.js'></script> </head> <body> <p>(前略)</p> <p><b>行き先</b>: <ul> <li>第一希望: <select name="dest" class="dest" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> <li>第二希望: <select name="dest2" class="dest" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> <li>第三希望: <select name="dest3" class="dest" required> <option value="">選択してください</option> <option value="hokkaido">北海道</option> <option value="tohoku">東北</option> <option value="chubu">中部</option> <option value="kinki">近畿</option> <option value="shikoku">四国</option> <option value="kyushu">九州</option> </select> </li> </ul> </p> <p><b>出発日</b>: <ul> <li>第一希望: <select name="day1" class="day" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> <li>第二希望: <select name="day2" class="day" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> <li>第三希望: <select name="day3" class="day" required> <option value="">選択してください</option> <option value="8-11">8/11</option> <option value="8-12">8/12</option> <option value="8-13">8/13</option> <option value="8-14">8/14</option> <option value="8-15">8/15</option> </select> </li> </ul> </p> <p>(後略)</p> </body> <script> $(function(){ $.uSelect('select.dest'); $.uSelect('select.day'); }); </script> </html> |
簡単にかけた。
ポイントは行き先のselectタグにはすべてdestというクラス名をつけ、出発日のselectタグにはすべてdayというクラス名をつけたところと、87, 88行目でそれぞれのクラス名を指定していることである。
一度選んだ選択肢はグレーアウトしてきちんと選べなくなっており、期待した動作が得られている。
なお、記事投稿日での最新のChrome, Firefox, Edge, IEで動作確認をしたが、同じ選択肢を選べないとう点では全てにおいて正しく動いた。
古いIEでは動かないかもしれない。
もっと簡単で良い方法は無いかなぁ。。。
同じカテゴリー(技術メモ)の他の記事を表示
全記事を表示
タグ: Web, プログラミング
コメント (2)
この記事に出ている「uselect」のソースはおもちでしょうか?
リンク先が消えていたため、もしありましたら共有いただきたくお願いいたします。
百瀬さん
コメントありがとうございます。
確かにこの記事に出ている「uselect」は今はリンクが切れていますね。(この記事の内容が使えないことは追記しておきます)
大変申し訳ありません。
コードも手元に残っておりません(調べてみたところ、アーカイブもなさそうです。。)。
お力になれず、申し訳ありません。