Ausblenden von Tabellenzeilen basierend auf dem in multiselectBOx ausgewählten Wert

Question

Wie kann ich Tabellenzeilen basierend auf dem in der Mehrfachauswahl ausgewählten Wert ein- und ausblenden?

Zum Beispiel habe ich unter Multiselect 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> 

, wenn der Benutzer foo und baz von Mehrfachauswahl wählen dann dann erhalte ich ausgewählte Werte als „1,3“ in jquery.Now in meinem html Ich möchte nur Tabellenzeilen sehen, deren ID entweder 1 oder 3.means alle Zeilen nicht sichtbar sein wird außer mit ID von 1 und 3

Dank in advance.any Hilfe würde viel

Answer 1

geschätzt, wenn Sie die val() eines Multi-Select zu bekommen waren, Sie Erhalte eine durch Kommas getrennte Liste aller ausgewählten Werte. Sie müssen diese Liste also abrufen, in ein Array aufteilen und dann das Array durchlaufen und für jeden Wert Maßnahmen ergreifen.

Etwas wie folgt aus:

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

Lesen Sie mehr über die Magie:

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

Answer 2

Sie könnten den Zeilen einen Datenwert Attribut geben und dann den Datenwert mit dem Optionswert vergleichen.

Like:

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

In JS benötigen Sie einen Click-Handler - S. T. wie:

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

Kann es nicht gerade jetzt testen (sorry), aber hier ist ein Link für Attribute Selektor: http://api.jquery.com/attribute-equals-selector/ in jquery