Drop down list filter using jquery or javascript

Question

I was wondering how to create a drop down menu to filter content. I have been searching the internet for 2 months and have yet to come across something or someone that will help me. This is the ONLY problem I have with this site I'm building for my boss. I would rather have jquery or javascript if possible, but at this point, I'll take whatever works. I really don't want just the answer either; please help me learn how this works.

So basically:

    <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>

The users will be able to choose from the brand, only the canned products of that brand, or only the dry products of that brand. When a user makes a selection from the drop down menu, only the images and relative text that equal the option value will remain, and the rest will "hide".

Here is a draft of the site. As you can see, it's a lot for customers to deal with without a filter:

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

Any help at all is so much appreciated. I'm tearing my hair out here.

UPDATE 6/30: So I'm trying all your suggestions, and nothing is working. I am pretty sure I understand the HTML part, but I am a designer, not a programmer, I don't understand the JQUERY parts at all. Anyone care to elaborate and teach me those parts?

Answer 1

It looks like all the images of the product get displayed from the HREF being hard coded, and all have the same class: imgthumbhold. I'm assuming that you don't have a database that is being referenced? Just picture files, and hard coded descriptions? That's okay, you can still filter what gets displayed with CSS.

Right now you have one class name in every product 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>

The first thing I would do, is get rid of the "imgthumbhold" class altogether. Every place you have that class, change the DIV to SECTION. Then give CSS styling to all SECTIONS. This way you don't need to waste a class on that generic styling.

I would put two classes in each SECTION element.

• class='dry' or class='wet'
• class='brand'

When your drop down menu for wet or dry is chosen, run a script that hides or displays all SECTION elements by class. Here is a jsFiddle that does what you want:

Hide Elements in Pure Javascript

Answer 2

You have to use some trick to resolve this. See my code.

<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>

and use this query code.

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

What I did is I took help of class and id to hide and show respective divs. See working example here.

Answer 3

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>

I am hiding the div on page load you can try the same using drop down change event. You can also try with the class name or using name of elements.

Answer 4

For enable/disable some selection option you can use this code

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

Here is the Link