test20240125

Multiple Select Sample 関東 九州 東北

<!-- 中分類のセレクトボックス -->
<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>