セレクトボックス×JavaScriptによるテーブルの検索

JavaScript

処理の流れ
1.検索元データは全てHTMLに保持する
2.セレクトボックスにイベントを作成し、関数を呼び出す
3.関数内の処理
　3-1.セレクトボックスの値を取得
　3-2.テーブル情報を取得
　3-3.テーブルの行数分forループを回す
　3-4.forループ内の処理
　　3-4-1.セレクトボックスの値と行の値を比較
　　　3-4-1-1.検索条件に一致：行を表示させる
　　　3-4-1-2.検索条件に不一致：行を非表示にする


具体例

<table id="languages">

<tr id="th"><th>名称</th><th>型付け</th><th>多重継承への対応</th></tr>

<tr id="静"><td>C   </td><td>静的  </td><td>え？            </td></tr>

<tr id="静"><td>Java</td><td>静的  </td><td>インターフェース</td></tr>

<tr id="動"><td>Ruby</td><td>動的  </td><td>Mix-in          </td></tr>

</table>
<select id="types" onChange="searchTable()">

<option value=""></option>

<option value="静">静的型言語</option>

<option value="動">動的型言語</option>

</select>
<script type="text/javascript">

<!--

function searchTable(){

  var select1 = document.getElementById('types');

  var types = select1.options;

  var selectedType = types.item(select1.selectedIndex).value;	

  var table = document.getElementById('languages');

  for( i = 1; i < table.rows.length; i++ ){

    if( selectedType == '' || selectedType == table.rows[i].id ){

      table.rows[i].style.display = '';

    }else{

      table.rows[i].style.display = 'none';

    }

  }

}

//-->

</script>


■参考
NLOG input text、checkbox、radio、select　から値を取得するJs
http://enjoyjob.blog116.fc2.com/?mode=m&no=234


膳ブログ: JavaScriptでテーブルを操作する
http://blog.zenbo.jp/article/14238893.html


Never Ever - javascript でテーブルの行の表示・非表示について
http://never-ever.info/modules/news/index.php?page=article&storyid=397