如何使用 Javascript 确保下拉菜单中选择的所有选项都显示第一列？答案

【问题标题】：How do I use Javascript to ensure that the first column appears for all the options selected in the drop-down menu?如何使用 Javascript 确保下拉菜单中选择的所有选项都显示第一列？
【发布时间】：2019-07-04 02:43:26
【问题描述】：

来自初学者的一个非常基本的问题。我需要您帮助修改以下代码中的 JavaScript，以便所有选定选项的第一列 (id="First Column") 出现在左侧。我搜索了多个线程和站点，但无法破解。

还想知道如果我需要在 Wordpress 网站上使用它，Javascript 代码是否会更好地破解它，或者 Jquery 会更好。大多数人都认为 JS 是 Wordpress 的更好选择，他们对此感到疑惑。

我确信它是一个非常基本的查询，对此的任何帮助将不胜感激。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
            <select>

        <div id="First Column" class="inv">
                <ul class="cd-features-list">
                        <li>Dis</li>
                        <li>Wea</li>
                        <li>Tra</li>
                    </ul>
        </div>
        <div id="content_1" class="inv">Option 1
                <ul class="cd-features-list">
                        <li>Option 1 Dis</li>
                        <li>Option 1 Wea</li>
                        <li>Option 1 Tra</li>
                    </ul>            
        </div>
        <div id="content_2" class="inv">Option 2
            <ul class="cd-features-list">
                <li>Option 2 Dis</li>
                <li>Option 2 Wea</li>
                <li>Option 2 Tra</li>
            </ul>           
        </div>
        <div id="content_3" class="inv">Option 3
            <ul class="cd-features-list">
                <li>Option 3 Dis</li>
                <li>Option 3 Wea</li>
                <li>Option 3 Tra</li>
            </ul>      
        </div>
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
        
    </body>
</html>

【问题讨论】：

标签： javascript jquery multiple-columns css-tables options

【解决方案1】：

我认为您不需要 jQuery 来解决这个特定问题。查看下面的更新脚本。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
            <select>

        <div id="First Column" class="inv">
                <ul class="cd-features-list">
                        <li>Dis</li>
                        <li>Wea</li>
                        <li>Tra</li>
                    </ul>
        </div>
        <div id="content_1" class="inv">Option 1
                <ul class="cd-features-list">
                        <li>Option 1 Dis</li>
                        <li>Option 1 Wea</li>
                        <li>Option 1 Tra</li>
                    </ul>            
        </div>
        <div id="content_2" class="inv">Option 2
            <ul class="cd-features-list">
                <li>Option 2 Dis</li>
                <li>Option 2 Wea</li>
                <li>Option 2 Tra</li>
            </ul>           
        </div>
        <div id="content_3" class="inv">Option 3
            <ul class="cd-features-list">
                <li>Option 3 Dis</li>
                <li>Option 3 Wea</li>
                <li>Option 3 Tra</li>
            </ul>      
        </div>
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    // using querySelectorAll to get all matching elements
                    var allVisible = document.querySelectorAll('.vis'),
                        target = document.getElementById(this.value),
                        firstColumn = document.getElementById('First Column');
                    // iterate through all visible elements instead of just one
                    allVisible.forEach(function(element) {
                        element.className = 'inv';
                    });
                    if (target !== null) {
                        target.className = 'vis';
                    }
                    // show or hide first column depending on whether any option is selected
                    if (firstColumn !== null) {
                        firstColumn.className = this.value ? 'vis' : 'inv';
                    }
            });
        </script>
        
    </body>
</html>

【讨论】：

非常感谢！！您的代码按预期工作！为迟到的回复道歉。
嗨@Artem Kobets。我已将代码更改为 jquery，因为其中的多选选项更直观。那里也面临问题。已将我的代码作为一个新问题发布，因为我无法在此处添加它，请查看它并感谢您提供的任何意见。