multiselectBOxで選択された値に基づいてテーブルの行を非表示にする

Question

複数選択で選択された値に基づいてテーブルの行を表示および非表示にするにはどうすればよいですか？

たとえば、私は以下のmultiselecctボックスを持っています。

<select multiple="multiple" > 
<option value="1">foo</option> 
<option value="2">bar</option> 
<option value="3">baz</option> 
<option value="4">toy</option> 
</select> 

そしてその後、私は私のhtmlでjquery.Nowで「1,3」などの値を選択し取得しています複数選択からユーザーを選択fooとバズは、私が唯一のIDがあるのいずれか1または表の行を表示したい場合はあなたは、すべての行は、あなたが複数選択のval()を取得した場合advance.anyヘルプのおかげで多くの

Answer 1

をいただければ幸い離れて1と3

からIDを持つ表示されません3.means選択したすべての値のコンマ区切りのリストを取得します。したがって、このリストを取得して配列に分割し、配列をループして各値を処理する必要があります。

このような何か：

$('#test').on('change', function() { 
    var numstr = $(this).val() + ""; 
    var numarr = numstr.split(','); 

    $('tr[id^=row]').hide(); 
    $.each(numarr, function(i, val) { 
     $('tr#row' + val).show(); 
    }); 
});​ 

HTML：

<select id="test" name="test" multiple="multiple" > 
<option value="1">foo</option> 
<option value="2">bar</option> 
<option value="3">baz</option> 
<option value="4">toy</option> 
</select> 

​<table> 
<tr id="row1"><td>1</td></tr> 
<tr id="row2"><td>2</td></tr> 
<tr id="row3"><td>3</td></tr> 
<tr id="row4"><td>4</td></tr> 
</table>​ 

http://jsfiddle.net/MqPzb/

魔法についての記事を読む：

• http://api.jquery.com/change/
• http://api.jquery.com/on/
• http://api.jquery.com/jQuery.each/

Answer 2

あなたは、行にデータ-value属性を与え、その後、オプション値とデータ値を比較することができます。

同様：JSで

<table id="table"> 
    <td data-value="2">Row 2</td> 
</table> 

あなたはクリックハンドラを必要とする - S。T.以下のような：

$('#yourSelectBox:option').click(function() { 
    var id = $(this).val(); 
    $('#table').find('td["data-id='+id+'"]').hide(); 
}); 

今それをテストすることはできません（すみません）が、ここでは、属性セレクタのリンクです：jqueryの中http://api.jquery.com/attribute-equals-selector/