javascriptでフィルターできない。クロームで動かない。

###前提・実現したいこと
１．javascriptでフィルターを作りたい。
２．グーグルクロームでも動くようにしたい

次のような感じで、for文を使ってデータを<body></body>に入れています。
for(var i = 0;i<f.length;i++){var f = fs[i]
$('<tr></tr>').append('<td class="1">' + f.number + '</td>');
$('<tr></tr>').append('<td class="2">' + f.name + </td>);
$('<tr></tr>').append('<td class="3">' + f.color + </td>);
$('<tr></tr>').appendTo(body);
}

表示は次のような感じです。

1 りんご赤
2 みかんオレンジ
3 ぶどう紫
4 トマト赤
1 りんご青
###発生している問題
これに、例えば真ん中に
<select id="A">

<option id="a">りんご</option> <option id="b">みかん</option> <option id="c">ぶどう</option> <option id="d">トマト</option> </select> <select id="B"> <option id="e">赤</option> <option id="f">オレンジ</option> <option id="g">紫</option> <option id="h">青</option> </select> とプルダウンをつくり、それに該当するものだけ表示したいので、次のような記述を使いました。

$("#a").on("click",function(){if($(".") + 1 + ":contains('りんご')"){$(".") + 1 + ":not('りんご')").parent().hide();$(".") + 1 + ":contains('りんご')").parent.show()}})
$("#b").on("click",function(){if($(".") + 1 + ":contains('みかん')"){$(".") + 1 + ":not('みかん')").parent().hide();$(".") + 1 + ":contains('みかん')").parent.show()}})
$("#c").on("click",function(){if($(".") + 1 + ":contains('ぶどう')"){$(".") + 1 + ":not('ぶどう')").parent().hide();$(".") + 1 + ":contains('ぶどう')").parent.show()}})
$("#d").on("click",function(){if($(".") + 1 + ":contains('トマト')"){$(".") + 1 + ":not('トマト')").parent().hide();$(".") + 1 + ":contains('トマト')").parent.show()}})
$("#e").on("click",function(){if($(".") + 1 + ":contains('赤')"){$(".") + 1 + ":not('赤')").parent().hide();$(".") + 1 + ":contains('赤')").parent.show()}})

$("#f").on("click",function(){if($(".") + 1 + ":contains('オレンジ')"){$(".") + 1 + ":not('オレンジ')").parent().hide();$(".") + 1 + ":contains('オレンジ')").parent.show()}})

$("#g").on("click",function(){if($(".") + 1 + ":contains('紫')"){$(".") + 1 + ":not('紫')").parent().hide();$(".") + 1 + ":contains('紫')").parent.show()}})

$("#h").on("click",function(){if($(".") + 1 + ":contains('青')"){$(".") + 1 + ":not('青')").parent().hide();$(".") + 1 + ":contains('青')").parent.show()}})

例えば、「りんご」を選ぶと次のようになります。

1 りんご赤
5 りんご青

しかし、次に「赤」を選ぶと

1 りんご赤

が表示したいのですが、

1 りんご赤
4 トマト赤

と表記され、フィルターができません。フィルターするにはどうしたらよいでしょうか？

あと、IEやfirefoxではキチンとさどうするのですが、クロームだと

<option>にon("click",・・・)は作動しないようで、これも作動しません。クロームで作動するように記述を変えたいです。

一部でもよいので、解決策があれば、よろしくお願いします。

kei344

2016/06/26 03:49

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

このようなコードで要件は満たせると思います。
jQuery のバージョンは 1.10.2 でテストしました。

JavaScript
1jQuery(function(){
2    $('#A').change(function(){
3        $('tr').hide()
4               .has('td:contains(' + $(this).val() + ')').show()
5               .not($('tr').has('td:contains(' + $(this).next().val() + ')')).hide();
6    });
7    $("#B").change(function(){
8        $('tr').hide()
9               .has('td:contains(' + $(this).prev().val() + ')').show()
10               .not($('tr').has('td:contains(' + $(this).val() + ')')).hide();
11    });
12});

HTML
1<form action="#" onsubmit="return false;">
2<select id="A">
3<option></option>
4<option>りんご</option> 
5<option>みかん</option> 
6<option>ぶどう</option> 
7<option>トマト</option> 
8</select>
9<select id="B">
10<option></option> 
11<option>赤</option> 
12<option>オレンジ</option> 
13<option>紫</option> 
14<option>青</option> 
15</select> 
16<table>
17<tbody>
18<tr><td>1</td><td>りんご</td><td>赤</td></tr>
19<tr><td>2</td><td>みかん</td><td>オレンジ</td></tr>
20<tr><td>3</td><td>ぶどう</td><td>紫</td></tr>
21<tr><td>4</td><td>トマト</td><td>赤</td></tr>
22<tr><td>1</td><td>りんご</td><td>青</td></tr>
23</tbody>
24</table>
25</form>