Скрытие строк таблицы на основе значения, выбранного в multiselectBOx

Question

Как я могу показать и скрыть строки таблицы на основе значения, выбранного в множественном выборе?

Например, у меня ниже многоэлементного поля.

<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 и baz из множественного выбора, тогда я получаю выбранные значения как «1,3» в jquery. Теперь в моем html я хотел бы только показать строки таблицы, чей идентификатор равен 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/

Читайте о магии:

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

Answer 2

Вы можете присвоить строкам атрибут значения данных, а затем сравнить значение данных со значением параметров.

Как:

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

В JS вам нужен обработчик щелчков -st like:

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

Не могу проверить это сейчас (извините), но вот ссылка для селектора атрибутов: http://api.jquery.com/attribute-equals-selector/ в jquery