「創建「可過濾」使用jQuery組合「使用HTML <select>下拉列表

Question

我想從這篇文章修改腳本：Create a 'Filterable" Portfolio with JQuery與一個HTML下拉菜單中使用

我的HTML

<select id="target"> 
    <option class="current">all</option> 
    <option value="2014">2014</option> 
</select> 

原始的HTML樣品

<ul id="portfolio"> 
<li><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li> 
<li><a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a></li> 
<li><a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a></li> 

PORTF Olio餐廳樣品

<ul id="portfolio"> 
<li class="integration design"> 
    <a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a> 
</li> 
<li class="design development"> 
    <a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a> 
</li> 
<li class="cms"> 
    <a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a> 
</li> 

JQuery的

$(document).ready(function() { 
$('ul#filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); 
    } else { 
     $('ul#portfolio li').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).fadeOut('normal').addClass('hidden'); 
      } else { 
       $(this).fadeIn('slow').removeClass('hidden'); 
      } 
     }); 
    } 

    return false; 
}); 
}); 

感謝

Answer 1

明白了！非常簡單，但必須學習一點jQuery。

HTML（注意我改ID爲 「年」）

<select id="year"> 
    <option value="all" class="current">All</option> 
    <option value="2014">2014</option> 
</select> 

JQuery的

$(document).ready(function() { 
$('#year').change(function() { 
    $('.current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = ($('#year').val()); 

    if(filterVal == 'all') { 
     $('div#works ul.hidden').fadeIn('slow').removeClass('hidden'); 

    } 

    else { 
     $('div#works ul').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).fadeOut('normal').addClass('hidden'); 
      } else { 
       $(this).fadeIn('slow').removeClass('hidden'); 
      } 
     }); 
    } 

}); 
});