基於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中選擇的值的隱藏表格行

回答

相關問題