Как отфильтровать таблицу по select?
В общем, есть xml, из него достаю информацию о товарах и вношу в таблицу, так же делаю select с категориями товаров. Как сделать что бы при выборе категории товара в select, в таблице скрывались товары не относящиеся к этой категории?
HTML:
<body>
<div id="wrap">
<div id="filter">
<button>Фильровать</button>
</div>
<div id="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" defer></script>
<script src="js/main.js" defer></script>
</body>
JS:
(function($) {
$(function() {
$.ajax({
type: "GET",
url: "xml/get.xml",
dataType: "xml",
success: parser
});
function parser(xml) {
var select = '<select class="sel">';
$(xml).find("category").each(function() {
select+='<option id="'+$(this).attr('id')+'">'+ $(this).text()+'</option>';
})
select+='</select>';
$('#filter').prepend(select);
var str='<table>';
str+='<tr style="font-weight: bold"><td>Название</td><td>Страна</td><td>Цена</td><td>Валюта</td><td>Товар</td><td>Доставка</td><td>Ассортимент</td><td>Склад</td><td>Категория</td><td>Ссылка</td></tr>'
$(xml).find("offer").each(function() {
str+='<tr id="'+$(this).attr('id')+'">';
str+='<td>'+$(this).find('name').text()+'</td>';
str+='<td>'+$(this).find('country_of_origin').text()+'</td>';
str+='<td>'+$(this).find('price').text()+'</td>';
str+='<td>'+$(this).find('currencyId').text()+'</td>';
str+='<td><img src="'+$(this).find('picture').text()+'"></td>';
str+='<td>'+$(this).find('delivery').text()+'</td>';
str+='<td>'+$(this).find('pickup').text()+'</td>';
str+='<td>'+$(this).find('store').text()+'</td>';
str+='<td>'+$(this).find('categoryId').text()+'</td>';
str+='<td><a href="'+$(this).find('url').text()+'" target="_blanc">link</a></td>';
str+='</tr>';
})
str+='</table>';
$('#content').append(str);
}
$('button').click(function() {
?????????
})
})
})(jQuery)
|