使用 HTML/Javascript 中的下拉菜单显示列表

Question

select 标记中的每个选项都是一个不同的列表，我目前已将其隐藏起来不显示在页面上。我想根据下拉列表中的用户 selects 在我的页面上显示列表。 javascript目前仅在控制台日志中显示列表的ID。

<script>

        document.addEventListener('DOMContentLoaded', () => {
                document
                    .getElementById('myDropdown')
                    .addEventListener('input', handleSelect);
            });
        function handleSelect(ev) {
            let select = ev.target;
            
            console.log(select.value);
        }

        function handleData(ev) {
            let theInput = ev.target;
        }
    
    
    </script>

<label for="curlinks">Curriculum Link:</label>  
                    
    <select id="myDropdown">
    <option value="all">All Content</option>
    <option value="art">Art</option>
    <option value="business">Business and Enterprise</option>
    <option value="computing">Computing</option>
    <option value="english">English and Literacy</option>
    <option value="human">Humanities</option>
    <option value="languages">Languages</option>    
    <option value="maths">Maths</option>
    <option value="numeracy">Numeracy and Finance</option>
    <option value="science">Science</option>
    <option value="service">Service and Health</option>
    <option value="tech">Technology and Engineering</option>
    </select>

Answer 1

最简单的方法是使用 jquery 函数 .hide() 和 .show()（如果您想要动画，也可以是 .fadeout() 或 fadein()）。
但是如果你想使用普通的 javascript 而不是 jquery 试试这个： https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Answer 2

Jquery// 首先为每个产品行设置数据属性和值（等于 select 标签值）。逻辑是当产品数据属性值与 select 标签值匹配时，产品隐藏未selected 产品。

将您的所有产品设置为“productDiv”class 以及与 select 标签值相匹配的数据属性和值

$(document).ready(function() {
$("#myDropdown").on("change", function () {
    $(".productDiv").hide();
    $(".productDiv[data-attribute=' "+ $(this).val()+" ' ").show();
}) ;
}) ;

Answer 3

尝试这样的事情：

document.addEventListener('DOMContentLoaded', () => {
    document
        .getElementById('myDropdown')
        .addEventListener('input', handleSelect);
});

function handleSelect(ev) {
    let select = ev.target;

    console.log(select.value);

    let list = document.getElementById(select.value);

    list.style.display = 'block';
}

function handleData(ev) {
    let theInput = ev.target;
}

<label for="curlinks">Curriculum Link:</label>  
                    
<select id="myDropdown">
<option value="all">All Content</option>
<option value="art">Art</option>
<option value="business">Business and Enterprise</option>
<option value="computing">Computing</option>
<option value="english">English and Literacy</option>
<option value="human">Humanities</option>
<option value="languages">Languages</option>    
<option value="maths">Maths</option>
<option value="numeracy">Numeracy and Finance</option>
<option value="science">Science</option>
<option value="service">Service and Health</option>
<option value="tech">Technology and Engineering</option>
</select>

<!-- The lists -->
<div id="art" style="display: none">Content of art's list</div>
<div id="business" style="display: none">Content of business's list</div>
<!-- etc... -->

使用 HTML/Javascript 中的下拉菜单显示列表

Display list using dropdown menu in HTML/Javascript

html

javascript

list

option

drop-down-menu