jQuery show content based on dropdown

Question

I wish to show content based on dropdown value. So 2005 select will only show content with date of 2005 etc.

HTML:

    <select id="year" name="Year"> 
        <option value="#" selected="selected">Year...</option> 
        <option value="#">2007</option> 
        <option value="#">2006</option> 
        <option value="#">2005</option> 
    </select>

-

<li class="pr">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2006</span>
</li>

<li class="pr">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2007</span>
</li>

Had a look at this: jQuery dropdown hide show div based on value

but seems overkill?

I don't think the one you linked is overkill, it's rather simple. You can simplify the hideAllDivs() method a bit since you're using classes and don't need to list out each individual id to hide. — CashIsClay, Sep 01 '11 at 15:08
the list of dates is variable though and could be 20 or so long, the linked method would mean writing a huge list. — BobFlemming, Sep 01 '11 at 15:11
Not at all. Hide ALL $(".pr") and then show the parent of $("span.date") where the value matches the selected option (one of the answers below already states how to do this). The concept is the same as the question you linked, though. — CashIsClay, Sep 01 '11 at 15:17

rickyduck · Accepted Answer · 2011-09-01T15:21:02.950

3

$('select#year').change(function(){

    theVal = $(this).children(':selected').text();
    $('span.date').each(function(){

        if($(this).text()==theVal){
            $('li.pr').hide();
            $(this).parent().show();
        }
    });
});

Sorry, this one should work with the HTML you have, old one was based of value.

edited Sep 01 '11 at 15:21

answered Sep 01 '11 at 15:14

rickyduck

4,030
14
58
93

score 0 · Answer 2 · answered Sep 01 '11 at 15:14

Many ways to do this, one of which is

<select id="year" name="Year"> 
            <option value="#" selected="selected">Year...</option> 
            <option value="2007">2007</option> 
            <option value="2006">2006</option> 
            <option value="2005">2005</option> 
</select>

Put id's on your li's

<li class="pr" id="2006">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2006</span>
</li>

<li class="pr" id="2007">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2007</span>
</li>

The jquery

$(function() {
    $('ul li').hide();  
    $('#year').change(function() {
       var year = $(this).val(); 
       $('#'+ year).show();  
    }); 
});

score 0 · Answer 3 · answered Sep 01 '11 at 15:24

Here's some quick JS, tested on jsbin, source

$('#year').live('change', function(){
  var Year = $(this).val();
  $('li.pr').hide();
  $('span.date').each(function(){
    if ($(this).text() == Year){
      $(this).parent().show();
      return false;
    }
  });
});

But you will need to change your html a bit for this to work:

<option value="#" selected="selected">Year...</option> 
<option>2007</option> 
<option>2006</option> 
<option>2005</option>

jQuery show content based on dropdown

3 Answers3

Linked