ブルダウン選択でページの表示内容を2つの条件で絞り込みたい

質問

http://okwave.jp/qa3018153.htmlのようなプルダウンの絞込み機能の作り方は理解できました。
ただ、こちらのサンプル画
http://www48.tok2.com/home/ranrararan/oshietegoo.gif
に表したように、２つの絞込み条件を入れ、絞込みボタンを押すと、テーブルの表示が条件にあった表示に切り替わる、というものを作りたいのですが、具体的にお分かりの方がいらっしゃれば是非ご教授願えませんでしょうか。

回答No.1

yambejp · ベストアンサー

２×２から１つのセルを表示するだけのプログラムであれば
以下のようにすればいけます
正規表現の部分さえ適切におこなえばもうすこし複雑なこともできるでしょう
（今回の正規表現は一部いい加減なごまかしが入ってます）

ただしテーブルの構造が複雑になってくると、表示・非表示でやっている
今回のようなやり方では整合性が取れない部分がでてくるので運用に
あわせて修正が必要です。

<style>
tr.hide{
display:none;
}
td.hide{
display:none;
}
</style>
<script>
function siborikomi(){
var v0=document.getElementById("s0").value;
var v1=document.getElementById("s1").value;
var reg=v0+'\\('+v1+'.*?\\)';
var trs=document.getElementById("t0").getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td");
var flg=true;
for(var j=0;j<tds.length;j++){
if(!tds[j].innerHTML.match(RegExp(reg))){
tds[j].className="hide";
}else{
tds[j].className="";
flg=false;
}
}
if(flg) trs[i].className="hide";
else trs[i].className="";
}
}
</script>
<form>
<p>
<select id="s0">
<option value="">選択して</option>
<option value="001">001</option>
<option value="002">002</option>
</select>
</p>
<p>
<select id="s1">
<option value="">選択して</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</p>
<p>
<input type="button" value="絞りこみ" onClick="siborikomi()">
</p>
</form>
<table id="t0" border>
<tbody>
<tr><td>001(a)</td><td>001(b)</td></tr>
<tr><td>002(a)</td><td>002(b)</td></tr>
</tbody>
</table>

補足

丁寧でわかりやすいご解答ありがとうございます。
私の説明が悪かったです！
↓こちらのような形になる予定です。
http://www48.tok2.com/home/ranrararan/oshietegoo.gif
ですからyambejpさんが私のサンプルを元に制作してくださったものにあります<td></td>内の数字を変数としては投げるというのは、できなくなると思うんです…。
グループ（サンプル内では大学となっています）の中のサークルの種類を絞り込む、といったような感じになるので​http://okwave.jp/qa3018153.html
のようなclassかidにサークルの変数を入れ、グループを<tbody>かなんかでくくるのがいいのかと思い挑戦していたんですが、
うまくできなかったのでここへ投稿したという経緯です。
他の方法でもいいですし、もしyambejpさんの挙げてくれたものを改変すればできるというようなことでもあれば、
是非ともご教授願いたいです。
説明不足ですみませんでした。