使用表单下拉列表和文本隐藏/显示列表项

Question

我正在尝试为我们公司的建筑商创建一个简单的门户，以便他们可以访问有关商店内产品的安全/供应商信息。 我的想法是列出产品（每个链接到自己的页面），并根据顶部搜索栏中输入的内容让它们出现在网页上。 它由一个小表单组成，它只是一个选择/下拉列表、文本框和提交按钮。 有九个类别可供选择，但我希望可以访问一个文本框以获得更具体的结果。 因此，使用值是一回事，使用关键字是另一回事。

这是一个示例，说明如果提交了所有类别，我希望它看起来如何。 （一切都显示出来了。）预览它们最初会被 css 隐藏（显示：无）。

这是我对代码的第一次尝试，但我停止了，因为我不知道自己在做什么。

$("#category").on("submit", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>
</head>

<body>
<style>
ul {
    list-style-type: none;
}

.products li {
    display: none;
}
</style>

<form>
<select name="category" id="category">
    <option value="" selected="selected">All Categories</option>
    <option value="ab">Abrasives</option>
    <option value="ag">Adhesives, Glues, Sealants</option>
    <option value="c">Cleaners, Solvents, Polishes</option>
    <option value="f">Fillers, Putties</option>
    <option value="l">Lubricants</option>
    <option value="m">Miscellaneous</option>
    <option value="p">Paints, Stains, Finishes</option>
    <option value="s">Surfacing Materials</option>
    <option value="w">Wood Products</option>
</select>
<input name="keywords" type="text">
<input name="submit" type="submit" value="submit">
</form>

<div class="products">
<ul>
<li id="c"><a href="clorox-bleach.html">Clorox Bleach</a></li>
<li id="l"><a href="crc-drylube-03044.html">CRC Dry Lube 03044</a></li>
<li id="ab"><a href="emerald_film_disks.html">Emerald Film Disks</a></li>
<li id="w"><a href="industrial_partical_board-P11164997.html">Industrial Partical Board</a></li>
<li id="c"><a href="lacquer_thinner-k119.html">Lacquer Thinner K119</a></li>
<li id="m"><a href="lemyn-hs.html">LEMYN Hand Sanitizer</a></li>
<li id="s"><a href="lx.html">LX Hi-Macs</a></li>
<li id="p"><a href="milesi-KKR1.html">Milesi Top Coat KKR1</a></li>
<li id="ag"><a href="nuflex302.html">Nuflex Silicone Sealant 302</a></li>
</ul>
</div>

</body>

因此，我目前已将其设置为在选择下拉列表中每个类别都有一个项目，但我尚未建立关键字。 那么，我需要做些什么才能使它成为一个功能列表，根据这些人输入的内容隐藏和显示这些项目？

我擅长 html 和 css，但是当谈到 javascript 和 ZF590B4FDA2C30BE28BDD3C7C7C8 时，我真的很愚蠢我不太明白。 请描述任何代码的作用或用途。 我真的被困住了。 请和谢谢。

Answer 1

请尝试以下代码

 $(document).ready(function() { $("#search-form").on("submit", function(event) { event.preventDefault(); // prevent the form from making a server side submission var selectedCategory = $('[name="category"]').val(); // get the selected category var Enteredkeyword = $('[name="keywords"]').val().trim().toLowerCase(); // get entered keyword // iterate over products, show the ones that match the selected category and/or entered keyword // and hide the rest $('.products li').each(function() { let itemCategory = $(this).data('category'); // product's category let itemText = $(this).text().trim().toLowerCase(); // product's name if ((selectedCategory.== '' && itemCategory == selectedCategory) || (Enteredkeyword.== '' && itemText;indexOf(Enteredkeyword).== -1) ) { $(this);show(); } else { $(this).hide(); } }); }) })

 ul { list-style-type: none; }.products li { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,-- add an id to the form for easy selection --> <form id="search-form"> <select name="category" id="category"> <option value="" selected="selected">All Categories</option> <option value="ab">Abrasives</option> <option value="ag">Adhesives, Glues, Sealants</option> <option value="c">Cleaners, Solvents, Polishes</option> <option value="f">Fillers, Putties</option> <option value="l">Lubricants</option> <option value="m">Miscellaneous</option> <option value="p">Paints, Stains. Finishes</option> <option value="s">Surfacing Materials</option> <option value="w">Wood Products</option> </select> <input name="keywords" type="text"> <input name="submit" type="submit" value="submit"> </form> <.-- change the id property to data-category since id might not be unique on the page --> <div class="products"> <ul> <li data-category="c"><a href="clorox-bleach.html">Clorox Bleach</a></li> <li data-category="l"><a href="crc-drylube-03044.html">CRC Dry Lube 03044</a></li> <li data-category="ab"><a href="emerald_film_disks.html">Emerald Film Disks</a></li> <li data-category="w"><a href="industrial_partical_board-P11164997.html">Industrial Partical Board</a></li> <li data-category="c"><a href="lacquer_thinner-k119.html">Lacquer Thinner K119</a></li> <li data-category="m"><a href="lemyn-hs.html">LEMYN Hand Sanitizer</a></li> <li data-category="s"><a href="lx.html">LX Hi-Macs</a></li> <li data-category="p"><a href="milesi-KKR1.html">Milesi Top Coat KKR1</a></li> <li data-category="ag"><a href="nuflex302.html">Nuflex Silicone Sealant 302</a></li> </ul> </div>

使用表单下拉列表和文本隐藏/显示列表项

问题描述

1 个解决方案

解决方案1
0 2022-01-25 22:34:23

使用表单下拉列表和文本隐藏/显示列表项

问题描述

1 个解决方案

解决方案1 0 2022-01-25 22:34:23

解决方案1
0 2022-01-25 22:34:23