Question

How can i show and hide table rows based on value selected in multiselect?

For example i have below multiselecct box.

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

if the user select foo and baz from multiselect then then i am getting selected values as “1,3” in jquery.Now in my html i would only want to show table rows whose id is either 1 or 3.means all the rows will not be visible having id apart from 1 and 3.

Thanks in advance.any help would be much appreciated

Answer 1

If you were to get the val() of a multi-select, you’d get a comma-separated list of all the selected values. So you need to get this list, split it into an array, and then loop through the array and take action on each value.

Something like this:

$('#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/

Read about the magic:

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