jQuery show content based on dropdown

I wis开发者_开发技巧h 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?

$('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.

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();  
    }); 
}); 

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>