1

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?

Improve this question
5
  • Put your info into a JSON file. Use Handlebars or similar for templating. Use JQuery's AJAX to read the file and filter the content. Commented Jun 28, 2014 at 4:47
  • Unrelated to your question, but note that you're using jQuery functions without having loaded the library. Add a <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> before the $(document).ready function. Commented Jun 28, 2014 at 5:03
  • @ChadHedgcock Are you talking about the code that starts with: "<script>$(document).ready(function () {$('.all').show();..." that was in the header? That was just left over from one of my many attempts to get this problem straightened out. I know how to code for design and basic function, not anything advanced. My boss still asked me to make the website so I'm trying my best here. I appreciated the notes though! Commented Jun 29, 2014 at 4:02
  • I don't see any green check-marks, so I take it you're still struggling with this? Commented Jun 30, 2014 at 17:03
  • I'm still figuring out the syntax in some of the coding. Commented Jul 1, 2014 at 4:26

4 Answers 4

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

10 Comments

Yeah, this store is a little old fashion in its ways so there's no database of anything whatsoever. I got all this info written down as I worked there. Unfortunately "imgthmbhold" is what's keeping the images and their respective captions in neat little rectangles- so I can't get rid of it. However, I researched more on <SECTION> and I have questions. First, should I put something like this: <section class="bluebrand"><section class="bluecan">blue buffalo can images </section><section class="bluedry">blue buffalo dry images</section></section>? Or are you refering to something else?
If the former is the case, this is also something that sounds like what I need and I can try. Thank you.
If you can't get rid of that class, I would just leave it, then add the other two classes in the DIV. The reason I wanted to replace the DIV with a SECTION is so that the CSS would have a very specific element to identify. If you have DIVs, inside of DIV'S, inside of DIV's, then which one does the CSS know to set the styling for? It can be done, but then you need to start using stuff like nthChild. Since there is no filtering of data, or dynamic injection of the HTML, the only other option I see, is hiding or displaying the HTML. And the way to do that is with logical groupings of classes
Fortunately I only have two divs associated with each image: "imgthmbhold" which holds the images and caption in rectangles as I said and "text_line" which keeps the caption neat and from spilling into other images. So is that going to be a problem? Also, if I add sections, any code that hides and displays will be associated with the sections not individual images correct?
I might be able to tweak the styling a bit so I don't need the "text_line" div, but if not, only two divs max.
|
0

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.

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

If you add others people fiddle make sure that you give the credit to the actual creator of the fiddle.
This sounds like what I'm looking for. I just got home from work so I'll try this in the morning. Is there anything I need to put in the drop down list or list values? I've seen in similar functions that more numbers are involved. Or is that what the "mercan" and "merdry" terms are for?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.