Как в jquery выбрать элемент по двум атрибутам data?

Question

[neytan]

Добрый день пытаюсь делать сортировку и столкнулся с проблемой. У нас есть два тега select, в них мы выбираем статус посылки и перевозчика, жмем по кнопке .result-btn и в таблице должны остаться только строчки с выбранными параметрами. Проблема состоит в том что у нас два параметра, заданные через атрибуты дата. Как показать строку, которая соответствует этим 2-м атрибутам data, к примеру отобразить посылки, доставляемые сдэком и со статусом "Оплачен"?

<select class="f-select-delivery" name="delivery" required="">
	<option value="Все службы">Все службы</option>
	<option value="Почта">Почта</option>
	<option value="Boxberry">Boxberry</option>
	<option value="СДЭК">СДЭК</option>
</select>
<select class="f-select-status" name="status" required="">
	<option value="Все заказы">Все заказы</option>
	<option value="В Пути">В Пути</option>
	<option value="Ждет Оплаты">Ждет Оплаты</option>
	<option value="Оплачен">Оплачен</option>
	<option value="Возврат">Возврат</option>
	<option value="Ошибка">Ошибка</option>
</select>
<button href="#" class="result-btn">Показать</button>
<div class="delibery-table-wrap">
	<div class="delivery-table-item" data-post="Почта" data-status="В пути"></div>
	<div class="delivery-table-item" data-post="СДЭК" data-status="Оплачен"></div>
	<div class="delivery-table-item" data-post="Boxberry" data-status="Оплачен"></div>
	<div class="delivery-table-item" data-post="Boxberry" data-status="Возврат"></div>
	<div class="delivery-table-item" data-post="СДЭК" data-status="В Пути"></div>
</div>
<script>
	$('.result-btn').on('click', function(){
		var deliveryVal = $('.f-select-delivery').val();
		var statusVal = $('.f-select-status').val();
		var dti = $('.delivery-table-wrap').find('.delivery-table-item');
		var dtw = $('.delivery-table-wrap');

		dti.hide();
		//Пытался реализовать задуманное в строчке ниже, но ничего не вышло
		dtw.find('.delivery-table-item[data-post='+ deliveryVal +'][data-status='+ statusVal +']').show();
	});
</script>

Answer 1

[Rsa97]

dtw.find('.delivery-table-item[data-post="'+ deliveryVal +'"][data-status="'+ statusVal +'"]').show();

Answer 2

[0xD34F]

Приведите в соответствие имена select'ов и data-атрибутов (name="delivery", data-post - пусть оба будут или delivery, или post). Сделайте пустыми строками значения option'ов, которые соответствуют всем вариантам.

$('.result-btn').on('click', function() {
  const values = $('select')
    .get()
    .filter(n => n.value)
    .map(n => [ n.name, n.value.toLowerCase() ]);

  $('.delivery-table-item')
    .show()
    .filter((i, { dataset: d }) => values.some(([ k, v ]) => d[k].toLowerCase() !== v))
    .hide();
});