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

Question

Each option within the select tag is a different list that I currently have hidden from being displayed on the page. I want to display the list on my page depending on what the user selects from the dropdown. The javascript currently only displays the ID of the list in the console log.

 <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

The easiest way to do this is to use jquery functions.hide() and.show() (could be also.fadeout() or fadein() if you want it animated).
But if you want to use plain javascript instead of jquery try this: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Answer 2

Jquery// First set a data- attribute and value (which are equal with select tag values) to each product rows. The logic is when the product data-attribute value matches the select tag value, the product hides unselected products.

Set all your product a "productDiv" class and data-attribute and values which matches select tag values

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

Answer 3

Try something like this:

 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... -->