时间戳

首页 > 解决方案 > 使用 HTML/Javascript 中的下拉菜单显示列表

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

问题描述

选择标签中的每个选项都是一个不同的列表，我目前已将其隐藏，无法显示在页面上。我想根据用户从下拉列表中选择的内容在我的页面上显示列表。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>

标签： javascripthtmllistdrop-down-menuoption

解决方案

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

推荐阅读