下拉列表过滤器使用jquery或javascript

Drop down list filter using jquery or javascript

本文关键字：javascript jquery 过滤器 下拉列表      更新时间：2023-09-26

我想知道如何创建一个下拉菜单来过滤内容。我已经在网上搜索了2个月了，还没有遇到能帮助我的东西或人。这是唯一的问题，我有这个网站，我正在建设我的老板。如果可能的话，我宁愿使用jquery或javascript，但在这一点上，我将采用任何有效的方法。我也不只是想要答案;请帮助我了解这是如何工作的。

基本上:

    <select>
    <optgroup label="Blue Buffalo">
    <option value="can">can</option>
    <option value="dry">dry</option>
    </optgroup>
    <optgroup label="Merrick">
    <option value="can">can</option>
    <option value="dry">dry</option>
    </optgroup>
    </select>
    <div>
    <div class="imgthmb"><a rel="lightbox" href="images/dog_blue_can_homestyle_beef.jpg">
    <img class="imgthumb" src="images/dog_blue_can_homestyle_beef_thmb.png" /></a>
    Blue Buffalo<br />
    Canned Dog Food<br />
    Homestyle<br />
    beef
    </div>
    </div>
    <div>
    <div class="imgthmb"><a rel="lightbox" href="images/dog_merrick_can_96_tripe.jpg">
    <img class="imgthumb" src="images/dog_merrick_can_96_tripe_thmb.png" /></a>
    Merrick<br />
    Canned Dog Food<br />
    96%<br />
    tripe
    </div>
    </div>

用户将能够从品牌中选择，只能选择该品牌的罐装产品，或者只能选择该品牌的干货。当用户从下拉菜单中进行选择时，只有等于该选项值的图像和相对文本将保留，其余部分将"隐藏"。

这是网站的草稿。如您所见，如果没有过滤器，客户要处理的内容很多:

http://ssalinas5.mydevryportfolio.com/shadow/shadow/all4pets_dogs.html

任何帮助都是非常感激的。我都快把头发扯出来了。

更新6/30:所以我试了你所有的建议，没有一个是有效的。我很确定我理解HTML部分，但我是一名设计师，不是程序员，我根本不理解JQUERY部分。有人愿意详细说明并教我这些部分吗?

要启用/禁用某些选择选项，可以使用以下代码

$("#selectOne").change(function () {
//You have to add your logic here 
   $('#val4').prop('disabled', 'disabled');
// you can also add your code for image showing
});

这里是链接

看起来所有产品的图像都是从硬编码的HREF中显示出来的，并且都具有相同的类:imgthumbhold。我猜你们没有要引用的数据库吧?只有图片文件和硬编码的描述?没关系，你仍然可以用CSS过滤显示的内容。

现在每个产品DIV中都有一个类名。

  <div class="imgthumbhold">
    <a href="images/dog_blue_can_stew_beef.jpg" rel="lightbox" title="&#8226;Blue Buffalo<br />&#8226;Stew beef canned<br />&#8226;In Store Sizes: 12.5oz"><img src="images/dog_blue_can_stew_beef_thmb.png" class="imgthumb" id="bluebuffalo" alt="Blue Buffalo stew canned"/></a>
    <div class="text_line">
      <a href="images/dog_blue_can_stew_beef.jpg" rel="lightbox" title="&#8226;Blue Buffalo<br />&#8226;Stew beef canned<br />&#8226;In Store Sizes: 12.5oz">DETAILS<br /></a>
      Blue Buffalo<br />
      Canned Dog Food<br />
      Stew<br />
      beef<br />
    </div>
  </div>

我要做的第一件事，是完全摆脱"imgthumbhold"类。每个有这个类的地方，把DIV改成SECTION。然后给所有的section CSS样式。这样你就不需要在泛型样式上浪费一个类了。

我将在每个SECTION元素中放置两个类。

    class='干'或class='湿'
  • 类= '品牌'

当选择了wet或dry下拉菜单时，运行一个脚本，按类隐藏或显示所有SECTION元素。下面是一个你想要的jsFiddle:

隐藏纯Javascript中的元素

Use Like

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var elems = document.getElementsByTagName('*');    
    for (i = 0; i < elems.length; i++) {
        if(elems[i].id == 'mask') {        //elems[i].className 
            elems[i].style.display = "none";
        }
    }
    });
</script>
</head>
<body>
<div id="first">
 <div id="firsttest">a</div>
  <div class="one onehelp">
   <div id="mask">
    <div id="onetip">b</div>
   </div>
   <div id="Div5">c</div>
   <div id="resultone">d</div>
  </div>
  <div class="two twohelp">
   <div id="mask">
    <div id="twotip">e</div>
   </div>
   <div id="Div6">f</div>
   <div id="resulttwo">g</div>
  </div>
  <div class="three threehelp">
   <div id="mask">
    <div id="threetip">h</div>
   </div>
   <div id="Div7">i</div>
   <div id="resultthree">j</div>
  </div>
</div>
</body>
</html>

我在页面加载上隐藏div，您可以使用下拉更改事件尝试相同的方法。您也可以尝试使用类名或使用元素名。

您必须使用一些技巧来解决这个问题。查看我的代码

<select id='group'>
  <optgroup label="Blue Buffalo">
    <option value="bufcan">can</option>
    <option value="bufdry">dry</option>
  </optgroup>
  <optgroup label="Merrick">
    <option value="mercan">can</option>
    <option value="merdry">dry</option>
  </optgroup>
</select>
<div class="bufcan">
  <div class="imgthmb">
    <a rel="lightbox" href="images/dog_blue_can_homestyle_beef.jpg">
      <img class="imgthumb" src="images/dog_blue_can_homestyle_beef_thmb.png" />
    </a>
    Blue Buffalo<br />
    Canned Dog Food<br />
    Homestyle<br />
    beef
  </div>
</div>
<div class="mercan">
  <div class="imgthmb">
    <a rel="lightbox" href="images/dog_merrick_can_96_tripe.jpg">
      <img class="imgthumb" src="images/dog_merrick_can_96_tripe_thmb.png" />
    </a>
    Merrick<br />
    Canned Dog Food<br />
    96%<br />
    tripe
  </div>
</div>

，并使用此查询代码。

$(document).ready(function(){
$('#group').change(function(e){
    $.map($('#group optgroup option'), function(e) {  $('.'+e.value).fadeOut(); });
    $('.'+$('#group').val()).fadeIn();
});
});

我所做的是我用class和id的帮助来隐藏和显示各自的divs。

相关文章：