基于multiselect中选择的值的隐藏表格行

如何根据多选中选定的值显示和隐藏表格行？基于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>

如果用户选择从多选foo和巴兹再然后我得到我的HTML jquery.Now选择的值作为“1,3”我只想显示的表行，其ID为1或3.means所有行会不会有1 ID除了和3

感谢advance.any的帮助会非常赞赏

来源

2012-03-26 Gautam

可见如果你得到的多选的val()，你'd得到所有选定值的逗号分隔列表。所以你需要得到这个列表，将它分解成一个数组，然后遍历数组并对每个值进行操作。

事情是这样的：

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

阅读关于魔法：

来源

2012-03-26 15:10:39 Blazemonger

其实我使用JqueryMultiselect使不工作对我来说...请检查此链接的jQuery多选http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ – Gautam 2012-03-26 15:21:46

@Gautam请参见，这是你真的需要把你的原始问题，以便我们可以帮助的那种信息你正确。 – Blazemonger 2012-03-26 19:19:08

你可以给行的数据值属性，然后比较数据值与期权价值。

像：

<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/

来源

2012-03-26 15:15:51 Zeus

基于multiselect中选择的值的隐藏表格行

回答

相关问题