使用jQuery切换显示/隐藏Select2时加载分类/产品选项失败求助

问题描述 #

在实现通过jQuery切换显示/隐藏Select2组件（分别加载分类或产品选项）时遇到异常，尝试多种方案（包括Stack Overflow及AI工具）均未解决，以下是原始代码：

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0</title>

    <link href="../assets/cdn/select2.min.css" rel="stylesheet" />
    <script src="../assets/cdn/jq.js"></script>
    <script src="../assets/cdn/select2.min.js"></script>

    <link href="../assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
    <style>
        .hidden {
            display: none;
        }
        
        .visible {
            display: block;
        }
    </style>
    <script>
        $(document).on('change', '#cat', function() {
            $('#catlist').removeClass('hidden').addClass('visible');
            $('#prolist').removeClass('visible').addClass('hidden');
        });

        $(document).on('change', '#pro', function() {
            $('#prolist').removeClass('hidden').addClass('visible');
            $('#catlist').removeClass('visible').addClass('hidden');
        });

        $(document).ready(function() {
            $('#catlist').select2();
            $('#prolist').select2();

            $.ajax({
                url: '../content/ajax/getcat.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, item) {
                        $('#catlist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                    $('#cat').click(); 
                }
            });

            $.ajax({
                url: '../content/ajax/getpro.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, item) {
                        $('#prolist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                }
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <div class="row p-4">
                    <label class="mb-3">Pro or Category</label>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" checked name="procat" type="radio" value="" id="cat" />
                            <label class="form-check-label" for="cat">category</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" name="procat" type="radio" value="" id="pro" />
                            <label class="form-check-label" for="pro">products</label>
                        </div>
                    </div>
                </div>

                <select class="form-select mb-3 hidden" id="catlist" data-control="select2" data-close-on-select="false" data-placeholder="select cats" data-allow-clear="true" multiple="multiple">
                </select>

                <select class="form-select mb-3 hidden" id="prolist" data-control="select2" data-close-on-select="false" data-placeholder="select products" data-allow-clear="true" multiple="multiple ">
                </select>
            </div>
        </div>
    </div>

</body>

</html>

问题根源分析 #

1. Select2初始化时机错误：页面加载时直接初始化隐藏状态的Select2组件，会导致组件渲染异常，因为Select2需要元素处于可见状态才能正确生成下拉DOM结构。
2. 动态添加选项后未刷新Select2：AJAX加载选项并追加到select后，没有通知Select2更新组件状态，导致新选项无法被识别。
3. 切换显示/隐藏时未处理Select2状态：直接通过CSS类切换显示隐藏后，已初始化的Select2组件可能出现布局或交互异常。

修复后的代码 #

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0</title>

    <link href="../assets/cdn/select2.min.css" rel="stylesheet" />
    <script src="../assets/cdn/jq.js"></script>
    <script src="../assets/cdn/select2.min.js"></script>

    <link href="../assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
    <style>
        .hidden {
            display: none;
        }
        
        .visible {
            display: block;
        }
    </style>
    <script>
        // 切换显示隐藏并处理Select2状态的通用函数
        function toggleSelect(showId, hideId) {
            const $showEl = $('#' + showId);
            const $hideEl = $('#' + hideId);
            
            $showEl.removeClass('hidden').addClass('visible');
            $hideEl.removeClass('visible').addClass('hidden');
            
            // 确保显示的Select2组件正确渲染
            if (!$showEl.data('select2')) {
                $showEl.select2({
                    closeOnSelect: false,
                    placeholder: $showEl.data('placeholder'),
                    allowClear: true,
                    multiple: true
                });
            } else {
                $showEl.select2('open').select2('close'); // 触发组件刷新
            }
            
            // 隐藏的组件销毁Select2实例，避免内存占用
            if ($hideEl.data('select2')) {
                $hideEl.select2('destroy');
            }
        }

        $(document).on('change', '#cat', function() {
            toggleSelect('catlist', 'prolist');
        });

        $(document).on('change', '#pro', function() {
            toggleSelect('prolist', 'catlist');
        });

        $(document).ready(function() {
            // 加载分类选项后初始化对应Select2
            $.ajax({
                url: '../content/ajax/getcat.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const $catList = $('#catlist');
                    $.each(data, function(index, item) {
                        $catList.append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                    // 初始化分类Select2并显示
                    toggleSelect('catlist', 'prolist');
                }
            });

            // 加载产品选项，暂不初始化
            $.ajax({
                url: '../content/ajax/getpro.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const $proList = $('#prolist');
                    $.each(data, function(index, item) {
                        $proList.append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                }
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <div class="row p-4">
                    <label class="mb-3">选择分类或产品</label>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" checked name="procat" type="radio" value="" id="cat" />
                            <label class="form-check-label" for="cat">分类</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" name="procat" type="radio" value="" id="pro" />
                            <label class="form-check-label" for="pro">产品</label>
                        </div>
                    </div>
                </div>

                <select class="form-select mb-3 hidden" id="catlist" data-placeholder="选择分类" multiple="multiple">
                </select>

                <select class="form-select mb-3 hidden" id="prolist" data-placeholder="选择产品" multiple="multiple">
                </select>
            </div>
        </div>
    </div>

</body>

</html>

关键修改点说明 #

• 延迟Select2初始化：仅在组件即将显示时才初始化Select2，避免隐藏状态下渲染异常。
• 通用切换函数：封装切换逻辑，处理显示/隐藏同时管理Select2的创建与销毁，避免内存泄漏和交互异常。
• AJAX加载后初始化：分类选项加载完成后再初始化对应的Select2组件，确保选项能被正确识别。
• 移除冗余属性：去掉select标签上的data-control="select2"等冗余属性，改为通过JS配置Select2参数，增强可控性。

内容的提问来源于stack exchange，提问作者iman farhadi