test20240125

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">
    <title>Multiple Select Sample</title>
</head>
<body>
    <!-- 大分類のセレクトボックス -->
    <select id="category1" multiple="multiple">
        <option value="関東">関東</option>
        <option value="九州">九州</option>
        <option value="東北">東北</option>
    </select>

    <!-- 中分類のセレクトボックス -->
    <select id="category2" multiple="multiple" style="display: none;" disabled>
        <!-- 選択された大分類に応じて動的に生成 -->
    </select>

    <!-- 小分類のセレクトボックス -->
    <select id="category3" multiple="multiple" style="display: none;" disabled>
        <!-- 選択された中分類に応じて動的に生成 -->
    </select>

    <script>
        $(function () {
            // 大分類のセレクトボックスをMultiple Selectに変換
            $('#category1').multipleSelect({
                width: 200,
                placeholder: "大分類を選択してください",
                filter: true,
                onClick: function(view) {
                    console.log("onClick - 選択された大分類:", view.value);
                    if (view.selected) {
                        // 選択された大分類に関連する中分類のオプションを動的に生成
                        console.log("onClick - 選択されてる!");
                        // 中分類を非表示にしてからオプションを追加
                        $('#category2').hide();
                        populateOptions($('#category1').multipleSelect('getSelects'), $('#category2'), {
                            '関東': ['東京', '神奈川'],
                            '九州': ['鹿児島', '福岡'],
                            '東北': ['新潟', '山形']
                        });
                        console.log("onClick - 中分類オプションを追加");
                        // オプションを追加後、中分類を表示
                        $('.ms-choice.disabled').removeClass('disabled');
                        $('#category2').removeAttr('disabled').show();
                        console.log('#category2');
                    } else {
                        // 大分類が選択解除されたら中分類をリセット
                        $('#category2').empty().multipleSelect('refresh');
                        // 小分類もリセット
                        $('#category3').empty().multipleSelect('refresh');
                    }
                }
            });

            // 中分類のセレクトボックスをMultiple Selectに変換
            $('#category2').multipleSelect({
                width: 200,
                placeholder: "中分類を選択してください",
                filter: true,
                onClick: function(view) {
                    console.log("onClick - 選択された中分類:", view.value);
                    if (view.selected) {
                        // 選択された中分類に関連する小分類のオプションを動的に生成
                        // 小分類を非表示にしてからオプションを追加
                        $('#category3').hide();
                        populateOptions($('#category2').multipleSelect('getSelects'), $('#category3'), {
                            '東京': ['千代田区', '渋谷区'],
                            '神奈川': ['横浜市', '川崎市'],
                            '鹿児島': ['鹿児島市',  '鹿屋市'],
                            '福岡': ['福岡市', '北九州市'],
                            '新潟': ['新潟市', '長岡市'],
                            '山形': ['山形市', '鶴岡市']
                        });
                        // オプションを追加後、小分類を表示
                        $('#category3').show();
                        console.log("onClick - 小分類オプションを追加");
                        $('.ms-choice.disabled').removeClass('disabled');
                        $('#category3').removeAttr('disabled').show();
                    } else {
                        // 中分類が選択解除されたら小分類をリセット
                        $('#category3').empty().multipleSelect('refresh');
                    }
                }
            });

            // 小分類のセレクトボックスをMultiple Selectに変換
            $('#category3').multipleSelect({
                width: 200,
                placeholder: "小分類を選択してください",
                filter: true
            });

            // オプションを動的に生成する関数
            function populateOptions(selectedValues, selectElement, options) {
                console.log("populateOptions - 選択された値:", selectedValues);
                selectElement.empty();
                selectedValues.forEach(function(selectedValue) {
                    if (options[selectedValue]) {
                        options[selectedValue].forEach(function(option) {
                            selectElement.append('<option value="' + option + '">' + option + '</option>');
                        });
                    }
                });
                // オプションを追加後、refresh メソッドを呼び出して更新
                selectElement.multipleSelect('refresh');
            }
        });
    </script>
</body>
</html>