基于jQuery+Select2实现二级下拉联动显示的功能问题求助

你遇到的核心问题是：Select2会将原生<select>的选项转换为自定义DOM结构，直接用show()/hide()操作原生<option>不会影响Select2渲染后的界面。必须通过Select2的API逻辑来动态更新可选项。

以下是修复后的完整代码：

<select id="firstSelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

<!-- Second select dropdown -->
<select id="secondSelect">
    <option value="A">Choice A</option>
    <option value="B">Choice B</option>
    <option value="C">Choice C</option>
    <option value="D">Choice D</option>
</select>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2 on both select dropdowns
        $('#firstSelect, #secondSelect').select2();

        // 保存第二个下拉框的所有原始选项，用于后续动态加载
        const secondSelectOptions = $('#secondSelect option').clone();

        // Event listener for change event on first select dropdown
        $('#firstSelect').on('change', function() {
            const selectedValue = $(this).val();
            const $secondSelect = $('#secondSelect');

            // 重置第二个下拉框
            $secondSelect.val(null).empty();

            // 根据选中值添加对应的选项
            switch(selectedValue) {
                case '1':
                    $secondSelect.append(secondSelectOptions.filter('[value="A"]'));
                    break;
                case '2':
                    $secondSelect.append(secondSelectOptions.filter('[value="B"]'));
                    break;
                case '3':
                    $secondSelect.append(secondSelectOptions.filter('[value="C"]'));
                    break;
                case '4':
                    $secondSelect.append(secondSelectOptions.filter('[value="D"]'));
                    break;
                default:
                    // 默认不添加任何选项
                    break;
            }

            // 触发Select2更新，同步界面
            $secondSelect.trigger('change.select2');
        });

        // Trigger change event on first select dropdown on page load
        $('#firstSelect').trigger('change');
    });
</script>

关键修改说明： #

• 保存原始选项：页面加载时克隆第二个下拉框的所有选项，避免每次操作丢失原始数据
• 替换show/hide逻辑：通过empty()清空下拉框，再用append()添加对应选项，直接修改原生<select>的选项集合
• 强制更新Select2：每次修改选项后触发change.select2，让Select2重新渲染界面

内容的提问来源于stack exchange，提问作者farhan dharsi