HTML+jQueryでマルチカラムなプルダウンリスト作った。
AccessとかだとおなじみのマルチカラムなプルダウンリストをHTMLでつくってみた。
選択結果を入力するinput-text要素と、プルダウンリストをtableで作ってあげるとプルダウンリストにしてくれる。
要jQuery。
動作確認はまだ全然なので、バグはたっぷりかも。
動作デモはこちら。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <style type="text/css"> <!-- .__select_wrapper { border: 1px solid #dbdfe6; /* プルダウンリストの枠線 */ max-height:100px; /* プルダウンリストの最大長 */ background: #ffffff; /* プルダウンリストの背景色 */ display: none; overflow-y: scroll; position: absolute; } .__select { border-collapse: collapse; border-spacing: 0; } .__select * { cursor: default; font-size: small; margin: 0; padding: 1px; } .__select>tbody .__selected { background-color: #0000ff; color: #ffffff; } --> </style> </head> <body> <p>top text.top text.top text.top text.top text.top text.top text.top text.top text.top text.top text.top text.</p> <label for="_select">都道府県</label> <input type="text" id="s1" class="_select" name="s1" /> <div class="__select_wrapper" id="s1__select_wrapper"> <table id="s1__select" class="__select"> <thead><!--リストにヘッダを付けることも可--> <tr class="__select_head"> <th>code</th> <th>name</th> <th>eng.</th> </tr> </thead> <tbody><!--リスト可するオプションはtbodyで括る--> <tr id="s1__select_option_1"> <!----> <td class="_value">1</td> <!--inputに適応する項目にはclass="_value"を設定する--> <td>東京都</td> <td>TOKYO</td> </tr> <tr id="s1__select_option_2"> <td class="_value">2</td> <td>山梨県</td> <td>YAMANASHI</td> </tr> <tr id="s1__select_option_3"> <td class="_value">3</td> <td>埼玉県</td> <td>SAITAMA</td> </tr> <tr id="s1__select_option_4"> <td class="_value">4</td> <td>神奈川県</td> <td>KANAGAWA</td> </tr> <tr id="s1__select_option_5"> <td class="_value">5</td> <td>千葉県</td> <td>CHIBA</td> </tr> </tbody> </table> </div> <label for="_select">性別</label> <input type="text" id="s2" class="_select" name="s2" /> <div class="__select_wrapper" id="s2__select_wrapper"> <table id="s2__select" class="__select"> <thead> <tr class="__select_head"> <th>name</th> <th style="display:none">id</th> </tr> </thead> <tbody> <tr id="s2__select_option_1"> <td>男</td> <td class="_value" style="display:none">10</td> <!--class="_value"を設定したtd要素に、 style="display:none"を設定することで、 非表示項目の値をinputに入れることも可能。--> </tr> <tr id="s2__select_option_2"> <td>女</td> <td class="_value" style="display:none">20</td> </tr> </tbody> </table> </div> <p>bottom text. bottom text. bottom text. bottom text. bottom text. bottom text. </p> <script type="text/javascript"> <!-- var id; // プルダウンオプションにhoverしたときに色を変える動作。 $(".__select>tbody>tr>*").hover( function(){ $(this).parent().children().addClass("__selected"); }, function(){ if($(this).parent().attr("id")!=id+"__select_option_"+$("#"+id).attr("value")) { $(this).parent().children().removeClass("__selected"); } }); // 入力部フォーカス時の動作。 $("._select").focus(function() { id = $(this).attr("id"); // プルダウンリストの表示位置を調節。 $("#"+id+"__select_wrapper").css("left",$("#"+id)[0].offsetLeft); $("#"+id+"__select_wrapper").css("top",$("#"+id)[0].offsetBottom); // プルダウンリストを表示する。 $("div#"+id+"__select_wrapper").css("display","block"); //選択中のオプションの色づけ。 $("table#"+id+"__select *").removeClass("__selected"); $("table#"+id+"__select>tbody>tr#"+id+"__select_option_"+$("#"+id).attr("value")+" *").addClass("__selected"); }); // 入力部のフォーカスが外れたときの動作。 $("._select").blur (function(){ // プルダウンリストを閉じる。 $("div#"+id+"__select_wrapper").css("display","none") }); // プルダウンオプションをクリックしたときの動作。 $(".__select>tbody>tr>*").mousedown(function(){ $("#"+id).attr("value",$(this).parent().children("._value").html()); }); //--> </script> </body> </html>
