如何管理两个相同的select2，隐藏和显示来自另一个select2的选定项目

管理两个相同的Select2元素并根据一个Select2的选择来隐藏或显示另一个Select2的选定项目，涉及到前端开发和DOM操作的知识。以下是解决这个问题的步骤和相关概念：

基础概念

Select2: 是一个jQuery插件，用于美化和增强HTML <select> 元素的功能。
DOM操作: Document Object Model（文档对象模型）允许JavaScript动态地访问和更新HTML文档的内容、结构和样式。
事件监听: 通过监听特定事件（如选择变化），可以执行相应的操作。

优势

用户体验: Select2提供了更好的用户界面和交互体验。
灵活性: 可以根据用户的选择动态调整界面元素。

类型

单选: 用户只能选择一个选项。
多选: 用户可以选择多个选项。

应用场景

表单选择: 在表单中提供更友好的选择方式。
数据过滤: 根据用户的选择动态过滤显示的数据。

解决方案

以下是一个示例代码，展示如何管理两个相同的Select2元素，并根据一个Select2的选择来隐藏或显示另一个Select2的选定项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2 Management</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
    <select id="select1" style="width: 200px;">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <select id="select2" style="width: 200px;">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#select1, #select2').select2();

            $('#select1').on('change', function() {
                var selectedValue = $(this).val();
                if (selectedValue) {
                    $('#select2').val(selectedValue).trigger('change');
                }
            });

            $('#select2').on('change', function() {
                var selectedValue = $(this).val();
                if (selectedValue) {
                    $('#select1').val(selectedValue).trigger('change');
                }
            });
        });
    </script>
</body>
</html>