JSドロップダウン選択

Question

imのJSのこれらの新しい並べ替え。

コードには、特定の内容（ALL、A、B、C）のアイテムを表示する機能があります。

コードはボタンでうまくいきますが、「ドロップダウン選択」のヘルプでボタンを機能させることはできません。

これは、あなたが持った問題は、あなたが選択オプションにリンクを置くしようとしていたということです Code

 I was trying to make this work, but it dosent:/ 

    <select class="dropdown-select" id="portfolio-sort"> 
     <option><a href="#" id="all">ALL</a></option> 
     <option><a href="#" data-cat="a">A</a></option> 
     <option><a href="#" data-cat="b">B</a></option> 
     <option><a href="#" data-cat="c">C</a></option> 
    </select> 

Answer 1

です。それは動作しません。ここで

はあなたが必要とするソリューションです。

JS

var Portfolio = { 
    sort: function(items) { 
     items.show(); 
     $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(300); 
    }, 
    showAll: function(items) { 
     items.fadeIn(300); 
    }, 
    doSort: function() { 
     $('#portfolio-select').on('change', function() { 
       var val = $(this).find(':selected').data('cat') 
       if (val != undefined) {  // it will be `undefined` for `all` because there is no `data-cat` on that object 
        var items = $('div[data-cat=' + val + ']', '#portfolio-content'); 
        Portfolio.sort(items); 
       } else { 
        Portfolio.showAll($('div.portfolio-item', '#portfolio-content')); 
       } 
     }); 
    } 
}; 

Portfolio.doSort(); 

HTML

<div id="portfolio"> 


<div id="portfolio-sort"> 
     <select id="portfolio-select"> 
      <option id="all">ALL</option> 
      <option data-cat="a">A</option> 
      <option data-cat="b">B</option> 
      <option data-cat="c">C</option> 
     </select> 
</div> 

<div id="portfolio-content"> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="a">A</div> 
    <div class="portfolio-item" data-cat="c">C</div> 
    <div class="portfolio-item" data-cat="b">B</div> 
</div>