如何使用Javascript确保为下拉菜单中选择的所有选项显示第一列?

问题描述 投票:0回答:1

这里的第一个计时器是一个非常基本的问题。我需要您的帮助来修改以下代码中的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个回答
0
投票

我不认为你需要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>
© www.soinside.com 2019 - 2024. All rights reserved.