Question

我想知道如何创建一个下拉菜单来过滤内容。我一直在互联网上搜索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部分。有人想详细说明并教我这些部分吗？

Answer 1

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

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

以下是Link

Answer 2

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

<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。请参阅工作示例here。

Answer 3

看起来产品的所有图像都是从硬编码的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。然后为所有SECTIONS提供CSS样式。这样你就不需要在泛型样式上浪费一个类了。

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

class ='dry'或class ='wet'
类= '品牌'

当您选择湿或干的下拉菜单时，运行一个脚本，按类隐藏或显示所有SECTION元素。这是一个做你想做的jsFiddle：

Hide Elements in Pure Javascript

Answer 4

使用喜欢

<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，您可以使用下拉更改事件尝试相同的操作。您也可以尝试使用类名或使用元素名称。

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

4 个答案: