Question

如何根据multiselect中选择的值显示和隐藏表格行？

例如我在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>

如果用户从multiselect中选择foo和baz然后我在jquery中选择值为“1,3”。在我的html中我只想显示id为1或3的表行。除了1和3之外，行将不可见。

提前致谢。非常感谢任何帮助

Answer 1

如果要获得多选的val()，您将获得所有选定值的逗号分隔列表。因此，您需要获取此列表，将其拆分为数组，然后遍历数组并对每个值执行操作。

这样的事情：

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

了解魔术：

Answer 2

您可以为行提供数据值属性，然后将数据值与选项值进行比较。

像：

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

在JS中你需要一个点击处理程序 - 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/

根据multiselectBOx中选择的值隐藏表行

2 个答案: