データ型を使用したドロップダウンボックス付きのjQueryフィルタ

Question

jQueryのドロップダウンボックスを使用してテーブルの行をフィルタリングする必要があります。どのようにするかわからないのは、オプションの値をテーブル行のデータ型に関連付ける方法です。

HTML：

<label for="filter">Type:</label> 
<select id="filter> 
    <option value="all">All Steps</option> 
    <option value="standard">Standards</option> 
    <option value="review">Reviews</option> 
</select> 

<table id="table> 
    <tr id="one" class="row" data-type="standard"> 
     <td>Standard</td> 
    </tr> 
    <tr id="one" class="row" data-type="review"> 
     <td>Reviews</td> 
    </tr> 
</table> 

JS：

$("#filter").change(function() { 
$("#table").find(data-type).each(function() { 
    if ($(this).text() != $("#filter").val()) 
     $(this).hide(); 
    else 
     $(this).parent().show(); 
    if ($("#filter").val() == "all") 
     $(this).show(); 
    }); 
}); 

jQueryのここでは、ちょうど私の周りの研究でこれまでに見つかったものをベースにしてつなぎ合わせています。データ型属性をテーブル行に残すことが重要です。

私はjQueryを初めて使っているので、何か助けてください！

ここでコードペンの：http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111

Answer 1

あなたは値が.val();

を使用することによって選択された何を見つけるあなたは.val()が$('.row');

ループ照合することを必要とするすべての行を取得するすべての行ときあなたはマッチを見つけるすべてを隠すだけで、次にあなたが望むものを示す、b/cコンピュータはこれをすごく速く感じるでしょう

.each(function(index, element) {}); 

フィルタがあります

EDIT：ループの外にあるすべてを隠すようにしてください。

$(".filter").change(function() { 
 
    var filterValue = $(this).val(); 
 
    var row = $('.row'); 
 
     
 
    row.hide() 
 
    row.each(function(i, el) { 
 
     if($(el).attr('data-type') == filterValue) { 
 
      $(el).show(); 
 
     } 
 
    }) 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label for="filter">Type:</label> 
 
<select class="filter" data-tableId="table1"> 
 
    <option value="all">All Steps</option> 
 
    <option value="standard">Standards</option> 
 
    <option value="review">Reviews</option> 
 
    <option value="inspection">Inspections</option> <option value="payment">Payments</option> 
 
    <option value="document">Documents</option> 
 
</select> 
 

 
<table id="table1"> 
 
    <tr id="one" class="row" data-type="standard"> 
 
    <td>Standard</td> 
 
    </tr> 
 
    <tr id="two" class="row" data-type="review"> 
 
    <td>Review</td> 
 
    </tr> 
 
    <tr id="three" class="row" data-type="inspection"> 
 
    <td>Inspections</td> 
 
    </tr> 
 
    <tr id="four" class="row" data-type="payment"> 
 
    <td>Payments</td> 
 
    </tr> 
 
    <tr id="five" class="row" data-type="document"> 
 
    <td>Documents</td> 
 
    </tr> 
 
    <tr id="one" class="row" data-type="standard"> 
 
    <td>Standard</td> 
 
    </tr> 
 
    <tr id="two" class="row" data-type="review"> 
 
    <td>Review</td> 
 
    </tr> 
 
    <tr id="three" class="row" data-type="inspection"> 
 
    <td>Inspections</td> 
 
    </tr> 
 
    <tr id="four" class="row" data-type="payment"> 
 
    <td>Payments</td> 
 
    </tr> 
 
    <tr id="five" class="row" data-type="document"> 
 
    <td>Documents</td> 
 
</table>

Answer 2

あなたはこの作業Fiddleを参照してください

$(document).ready(function() { 
     var $rows = $('table tr'); 
     $("#filter").change(function() { 

      var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
       reg = RegExp(val, 'i'), 
       text; 
      if ($(this).val() !== 'all') { 

       $rows.show().filter(function() { 
        text = $(this).data('type').replace(/\s+/g, ' '); 
        return !reg.test(text); 
       }).hide(); 

      } else { 
       $rows.show(); 
      } 
     }); 
    }); 

にあなたのjsの関数を変更することができます。

Answer 3

@ wlinの回答に加えて ドロップダウンの「すべて」の値。

$("#filter").change(function() { 
 
    console.clear(); 
 
    var filterValue = $(this).val(); 
 
    var row = $('.row'); 
 

 
    row.each(function(i, el) { 
 
    if ($(el).attr('data-type') == filterValue) { 
 
     row.hide() 
 
     $(el).show(); 
 
    } 
 
    }); 
 
// In Addition to Wlin's Answer (For "All" value) 
 
    if ("all" == filterValue) { 
 
    row.show(); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label for="filter">Type:</label> 
 
<select id="filter"> 
 
    <option value="all">All Steps</option> 
 
    <option value="standard">Standards</option> 
 
    <option value="review">Reviews</option> 
 
    <option value="inspection">Inspections</option> 
 
    <option value="payment">Payments</option> 
 
    <option value="document">Documents</option> 
 
</select> 
 

 
<table id="table"> 
 
    <tr id="one" class="row" data-type="standard"> 
 
    <td>Standard</td> 
 
    </tr> 
 
    <tr id="two" class="row" data-type="review"> 
 
    <td>Review</td> 
 
    </tr> 
 
    <tr id="three" class="row" data-type="inspection"> 
 
    <td>Inspections</td> 
 
    </tr> 
 
    <tr id="four" class="row" data-type="payment"> 
 
    <td>Payments</td> 
 
    </tr> 
 
    <tr id="five" class="row" data-type="document"> 
 
    <td>Documents</td> 
 
    </tr> 
 
</table>