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

Question

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

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

我相信這個問題是腳本正在搜索整個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/

也就是說，隱藏當前行，然後找到的.text()其.state元素，.trim()表示那麼，而不是.indexOf()只是使用===與比較易混淆地命名爲letter變量的值。

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