JS問題與下拉菜單和狀態選擇

Question

這是小提琴： https : //jsfiddle.net/6aevjxkx/38/

在下拉菜單中，如果您選擇內布拉斯加州，您會看到華盛頓州的學校位置，該位置不應出現。

我相信的問題是，腳本正在ENTIRE td部分中搜索任何匹配的狀態初始值。 對於華盛頓的學校，地址中帶有“ NE”，當您從下拉列表中選擇內布拉斯加州時，它會出現。

話雖如此，如何更新腳本，使其只能在具有“狀態”類的div中搜索匹配狀態？ 或者，如果還有其他解決方案，我的耳朵會睜大。

謝謝你！

腳本代碼

$('select#stateCollege').change( function(e) { 
   var letter = $(this).val();
     if (letter === 'ALL') {
         $ ('table.event tr').css('display','inline-block');
     } else {
         $('table.event tr').each( function(rowIdx,tr) {
             $(this).hide().find('td').each( function(idx, td) {
                 if( idx === 0 || idx === 1) {
                     var check = $(this).text();
                     if (check && check.indexOf(letter) > 0) {
                        $(this).parent().css('display','inline-block');
                    } 
                 }
       });             
    });
   }             
});

Answer 1

類似於以下作品：

$('table.event tr').each(function(rowIdx, tr) {
    var row = $(this).hide();
    var state = row.find('.state').text().trim();
    if (state === letter)
        row.css('display', 'inline-block');
});

更新的演示： https : //jsfiddle.net/6aevjxkx/42/

也就是說，隱藏當前行，然后找到其.state元素.trim()的.text() ，而不是.indexOf()僅使用===來與該名稱相當混亂的letter變量。

注意，由於每行只有一個td ，因此在td元素上使用.each()沒有意義。