セレクトボックスの内容変更

今回は select の処理です。
親となる select を選択することで 子となる select の選択内容を変更します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                // Data Set
                var arrMain = new Array();
                    arrMain['A'] = new Array();
                    arrMain['A']['A_1'] = 'Disp_A_1';
                    arrMain['A']['A_2'] = 'Disp_A_2';
                    arrMain['A']['A_3'] = 'Disp_A_3';
                    arrMain['A']['A_4'] = 'Disp_A_4';
                    arrMain['B'] = new Array();
                    arrMain['B']['B_1'] = 'Data_B_1';
                    arrMain['B']['B_2'] = 'Data_B_2';
                    arrMain['B']['B_3'] = 'Data_B_3';
                    arrMain['B']['B_4'] = 'Data_B_4';
                    arrMain['B']['B_5'] = 'Data_B_5';
                    arrMain['C'] = new Array();
                    arrMain['C']['C_1'] = 'Data_C_1';
                    arrMain['C']['C_2'] = 'Data_C_2';
                    arrMain['C']['C_3'] = 'Data_C_3';
                    arrMain['D'] = new Array();
                    arrMain['D']['D_1'] = 'Data_D_1';
                    arrMain['D']['D_2'] = 'Data_D_2';
                    arrMain['D']['D_3'] = 'Data_D_3';
                    arrMain['D']['D_4'] = 'Data_D_4';
                    arrMain['D']['D_5'] = 'Data_D_5';
                    arrMain['D']['D_6'] = 'Data_D_6';
                    arrMain['D']['D_7'] = 'Data_D_7';
                    arrMain['D']['D_8'] = 'Data_D_8';
                    arrMain['D']['D_9'] = 'Data_D_9';


                // Change Main
                $('#select_main').change( function(){

                    $('#select_sub').empty().append("<option>Select Sub Data</opton>");
                    if ($(this).val() == '') {
                        return;
                    }

                    for (var sKey in arrMain[$(this).val()]) {
                        $('#select_sub').append("<option value='" + sKey + "'>" + arrMain[$(this).val()][sKey] + "</opton>");
                    }

                });


                // Init Data
                $('#select_main').empty().append("<option>Select Main Data</opton>");
                for (var mKey in arrMain) {
                    $('#select_main').append("<option value='" + mKey + "'>Select Main " + mKey + "</opton>");
                }
                $('#select_main').trigger('change');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="select_area">
                <select id="select_main"></select>
                <select id="select_sub"></select>
            </div>
        </div>

    </body>
</html>

sample

sample では左側の選択内容によって、右側の選択内容を切り替えます。
CMS では「お問い合わせ」などに plugin など良く使うと思いますが、
使用している plugin が select の内容変更に対応しているとは限りせん。
そんなときに今回の内容が使えるのではないのでしょうか。

ちなみに、以前は対象外の option を hide で非表示にしておりましたが、
ブラウザが IE の場合 option は消せないとのことです。
いい加減ブラウザ毎の差異は無くならないかなぁ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です