読者です 読者をやめる 読者になる 読者になる

ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

HTML+jQueryでマルチカラムなプルダウンリスト作った。

javascript ウェブサイト制作 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>