Как скрывать ненужные элементы с помощью jQuery?

Question

[leopardo11]

Есть такой код в html

<select class="subject-width" name="term-lang" id="sort-by-category">
				<option value="" selected="selected">{lang key='select_category'}</option>
				{foreach $categories as $category}
					<option value="{$category.id}">{$category.title}</option>
				{/foreach}
			</select>

			{foreach $foundGlossaries as $glossary}
				<p class="js-glossary-cat" data-category="{$glossary.category_id}"><a href="#">{$glossary.term}</a></p>
			{/foreach}

С первым форичом выводятся категории, со вторым термины.

Код JS, недоделанный

$('#sort-by-category').on('change', function()
	{
		var value = $('#sort-by-category').val();
		var glossaryCat = $('.js-glossary-cat').data('category');



		if (value == glossaryCat)
		{
			$('.js-glossary-cat' == value).show();
		}
		else
		{
			$('.js-glossary-cat' != value).hide();
		}

	});

Мне нужно сравнивать value="{$category.id}" (из категории) и data-category="{$glossary.category_id}" (из терминов), и при выбере селектом определенной категории, скрывались те термины, которые не совпадают по категории, а те что совпадают, оставались. Не могу решить.

Answer 1

[Роман Скрябин]

Думаю как то так

$('#sort-by-category').on('change', function(){
    var value = $('#sort-by-category').val();
    $('.js-glossary-cat[data-category="'+value+'"]').show().siblings('.js-glossary-cat').hide();
  });

Answer 2

[Владимир Мальцев]

value = $('#sort-by-category').val();
$('.js-glossary-cat').hide();
$(".js-glossary-cat data-category='"+ value  +"'").show();