如何使用jQuery或Javascript在其他下拉列表中显示/隐藏相同选项

基础概念

在前端开发中，下拉列表（Dropdown List）通常是由<select>元素实现的，它允许用户从多个选项中选择一个。使用jQuery或原生JavaScript，可以动态地控制这些选项的显示和隐藏。

类型

显示/隐藏选项：根据某些条件显示或隐藏特定的选项。
动态添加/删除选项：根据用户输入或其他事件动态地向下拉列表中添加或删除选项。

应用场景

表单验证：在用户选择某个选项后，根据该选项的值显示或隐藏其他相关的选项。
个性化设置：根据用户的偏好或之前的选择，动态调整下拉列表中的选项。

示例代码

以下是一个使用jQuery和原生JavaScript实现显示/隐藏相同选项的示例：

使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="dropdown1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <select id="dropdown2">
        <option value="1">Option 1</option>
        <option value="2" style="display:none;">Option 2</option>
        <option value="3" style="display:none;">Option 3</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#dropdown1').change(function() {
                var selectedValue = $(this).val();
                $('#dropdown2 option').hide();
                $('#dropdown2 option[value="' + selectedValue + '"]').show();
            });
        });
    </script>
</body>
</html>

使用原生JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown Example</title>
</head>
<body>
    <select id="dropdown1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <select id="dropdown2">
        <option value="1">Option 1</option>
        <option value="2" style="display:none;">Option 2</option>
        <option value="3" style="display:none;">Option 3</option>
    </select>

    <script>
        document.getElementById('dropdown1').addEventListener('change', function() {
            var selectedValue = this.value;
            var options = document.getElementById('dropdown2').options;
            for (var i = 0; i < options.length; i++) {
                options[i].style.display = 'none';
            }
            options[selectedValue - 1].style.display = 'block';
        });
    </script>
</body>
</html>