我正在尝试做什么：我正在为我的雇主制作一个简单的网站，他们希望列出所有产品。他们还希望产品能够按类型过滤（即罐头食品，干食品，皮带，跳蚤等）和品牌（即Blue Buffalo，Wellness，Natural Balance等）。我根本不知道如何进行过滤，而不是搞砸灯箱代码。虽然我不知道究竟是谁做了这个代码，我正在寻找类似这样的东西 - http://jsfiddle.net/sendmetamil/8BL5q/3/ - 当你选择一个选项时，只有那个类或id或任何会显示的东西。我需要用户能够先按品牌过滤，然后按类型过滤。
注意：我更喜欢它在JavaScript和单独的JS文件中，所以我可以将它链接到需要它的页面，但如果你有一个更简单的方法，那就太好了。我不能改变任何CSS;除了一个主要的浏览器之外，所有的间距都是完美的，对于移动设备来说，甚至相当不错。此外，您应该知道我只有 非常基本的 HTML和CSS知识。我几乎不了解PHP，JS等等。所以，如果它对您来说很方便，请向我解释为什么编码您编码的代码以及我将这些代码放在相对于退出代码的确切位置。在此先感谢大家。
以下是我在HTML中的内容：
<body>
<div class="container">
<div class="header">
NAVIGATION CODES
<div class="content">
<div class="sidebar1">
<form name="form" id="form">
<select name="brand" id="brand" onchange="MM_jumpMenu('parent',this,0)">
<option value="all4pets_dogs.html" id="filter-none">FILTER BY BRAND</option>
<option value="all4pets_dogs.html" id="filter-againstthegrain">Against the Grain</option>
<option value="all4pets_dogs.html" id="filter-bynature">By Nature</option>
<option value="all4pets_dogs.html" id="filter-californianatural">California Natural</option>
<option value="all4pets_dogs.html" id="filter-canidae">Canidae</option>
<option value="all4pets_dogs.html" id="filter-chickensoup">Chicken Soup for the Soul</option>
</select>
</form>
<h3>Don't see what you want? We make special orders!</h3>
<!-- end .sidebar1 --></div>
<h4>Dogs</h4>
<div class="imgthumbhold"><a href="images/againstthegrain_can.jpg" rel="lightbox" title="Against the Grain canned dog food<br />12oz"><img src="images/againstthegrain_can_thmb.png" class="imgthumb" id="againstthegrain" alt="Against the Grain canned"/></a>
<div class="text_line">Against the Grain<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/bynature95_can.jpg" rel="lightbox" title="By Nature 95% canned dog food<br />13.2oz"><img src="images/bynature95_can_thmb.png" class="imgthumb" id="bynature" alt="By Nature 95% canned"/></a>
<div class="text_line">By Nature 95%<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/bynatureentree_can.jpg" rel="lightbox" title="By Nature Entrees canned dog food<br />13oz"><img src="images/bynatureentree_can_thmb.png" class="imgthumb" id="bynature" alt="By Nature Entrees canned"/></a>
<div class="text_line">By Nature Entrees<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/bynatureorganics_can.jpg" rel="lightbox" title="By Nature Organics canned dog food<br />4lb"><img src="images/bynatureorganics_can_thmb.png" class="imgthumb" id="bynature" alt="By Nature Organics canned"/></a>
<div class="text_line">By Nature Organics<br />
Dry Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/canatural_dry.jpg" rel="lightbox" title="California Natural dry dog food<br />5lb"><img src="images/canatural_dry_thmb.png" class="imgthumb" id="californianatural" alt="California Natural dry"/></a>
<div class="text_line">California Natural<br />
Dry Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/canatural_can.jpg" rel="lightbox" title="California Natural canned dog food<br />5lb"><img src="images/canatural_can_thmb.png" class="imgthumb" id="californianatural" alt="California Natural canned"/></a>
<div class="text_line">California Natural<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/canatural_treats.jpg" rel="lightbox" title="California Natural dry dog food<br />5lb"><img src="images/canatural_treats_thmb.png" class="imgthumb" id="californianatural" alt="California Natural treats"/></a>
<div class="text_line">California Natural<br />
Treats<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/canidae_can.jpg" rel="lightbox" title="Canidae canned dog food<br />5lb"><img src="images/canidae_can_thmb.png" class="imgthumb" id="canidae" alt="Canidae canned"/></a>
<div class="text_line">Canidae<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/canidae_dry.jpg" rel="lightbox" title="Canidae dry dog food<br />5lb"><img src="images/canidae_dry_thmb.png" class="imgthumb" id="canidae" alt="Canidae dry"/></a>
<div class="text_line">Canidae<br />
Dry Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/chickensoup_can.jpg" rel="lightbox" title="Chicken Soup canned dog food<br />5lb"><img src="images/chickensoup_can_thmb.png" class="imgthumb" id="chickensoup" alt="Chicken Soup for the Soul canned"/></a>
<div class="text_line">Chicken Soup for the Soul<br />
Canned Dog Food<br />
</div>
</div>
<div class="imgthumbhold"><a href="images/chickensoup_dry.jpg" rel="lightbox" title="Chicken Soup dry dog food<br />5lb"><img src="images/chickensoup_dry_thmb.png" class="imgthumb" id="chickensoup" alt="Chicken Soup for the Soul dry"/></a>
<div class="text_line">Chicken Soup for the Soul<br />
Dry Dog Food<br />
</div>
</div>
<!-- end .content --></div>
<div class="footer">
<p>©2013 Dark Wolf Designs</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>