我想知道如何创建一个下拉菜单来过滤内容。我已经在网上搜索了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="•Blue Buffalo<br />•Stew beef canned<br />•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="•Blue Buffalo<br />•Stew beef canned<br />•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
。