<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<br><p> Year :
<select class="form-control">
<option selected="selected" value="0"> -- Choose Your Preferred Year -- </option>
<option value="1"> 2010 </option>
<option value="2"> 2011 </option>
<option value="3"> 2012 </option>
</select value="4"></p>
</div>
<div class="col-sm-4">
<br><p> Events :
<select class="form-control">
<option selected="selected" value="zero"> -- Choose Your Preferred Event -- </option>
<option value="one"> Annual Alumni Meet of 2012 Batch </option>
<option value="two"> Global Conference 2010 </option>
<option value="three"> Nostalgia 1980's </option>
<option value="four"> Star Campus 2008 </option>
</select></p>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="page_content">
<div id="photo_gallery_page" class="page">
<div id="photo_gallery_menu_container">
<ul id="photo_gallery_menu">
<li><a href="gallery-1.php"> Photos </a></li>
<li class="active"><a href="gallery.php"><span> Videos </span></a></li>
</ul>
</div>
<div id="photo_gallery_content">
<div id="photo_gallery_pictures_container" class="photo_gallery_pictures_container"><a class="album_anchor" href="/gallery/albums/15">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url( https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);">
</div>
<p class="album_title">Nostalgia</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/16">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);">
</div>
<p class="album_title">Star alumni global conference 2007</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/17">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/18/thumbnails/jn-tata-2015_small.jpg);">
</div>
<p class="album_title">Star global conference 2013</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/18">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/17/thumbnails/iisc-aana-2013-2_small.jpg);">
</div>
<p class="album_title">Star Campus </p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/143">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);">
</div>
<p class="album_title">Star Global Alumni Conference 2015</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/356">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);">
</div>
<p class="album_title">Nostalgia-1980s</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/362">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/362/thumbnails/100-0019_img_small.JPG);">
</div>
<p class="album_title">StarAANA Formative Years</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/392">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);">
</div>
<p class="album_title">Celebration @ Star</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/406">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/406/thumbnails/felicitation_small.jpg);">
</div>
<p class="album_title">Felicitation of Prof. Selvarajan & Mrs. Indira Devi for their generous contribution</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/456">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/456/thumbnails/20160122_153021_small.jpg);">
</div>
<p class="album_title">StarAANA: Faculty and Student Visits</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/587">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);">
</div>
<p class="album_title">Panel Discussion on: "Entrepreneurship or Employment: What governs the Choice?"</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/1859">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1859/thumbnails/excellence-award-2005_small.jpg);">
</div>
<p class="album_title">Star Gifts</p>
</div>
</a>
<a class="album_anchor" href="/gallery/albums/1931">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1931/thumbnails/509536602_3d28eb1156_o_small.jpg);">
</div>
<p class="album_title">Chemeng 2005-2007</p>
</div>
</a></div>
<p class="cB"></p>
<div id="loading" style="display: none;">
<img src="/static/img/loading.gif">
</div>
<div id="gallery_done">
</div>
</div>
</div>
</div>
</div>
上面给出的是我的html代码..这里我给了2个过滤器选项（即）按年过滤并按事件过滤。当用户从相应的选择框中选择特定的年份或事件时，图像必须相应地自动过滤，并且最终结果应该根据该过滤器显示。为此，我该怎么做才能得到它？请为我提供正确的解决方案..
答案 0 :(得分：1)
这是一个非常广泛的问题。
基本上，您有两个选择：客户端过滤或服务器端过滤。
这个html可能是使用数据库中的数据构建在服务器上的。在这种情况下，您必须过滤服务器上的列表。更改选择列表必须向选择了参数的服务器发送请求，并发回新的专辑列表。这里仍然有两个选项：完整页面重新加载或使用Ajax。
如果您想做客户端的所有事情，您的代码会错过重要信息。您必须将其添加到相册的代码中。
你怎么知道这是哪一年，或者是什么事件？
<a class="album_anchor" href="/gallery/albums/392">
<div class="picture album">
<div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);">
</div>
<p class="album_title">Celebration @ Star</p>
</div>
</a>
您必须在某处包含数据。同样有很多方法可以做到这一点。例如，您可以使用数据属性，如下所示：
<a class="album_anchor" href="/gallery/albums/392"
data-year="2011" data-event="two">
这将允许您使用Javascript或jquery进行过滤。
你知道，还有很长的路要走。因此，解决这个问题缩小了你的问题范围。目前看来它太宽泛而无法得到简洁的答案。