Javascript-форум - display:block в зависимости от выбраного элемента

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - display:block в зависимости от выбраного элемента (https://javascript.ru/forum/dom-window/72397-display-block-v-zavisimosti-ot-vybranogo-ehlementa.html)

display:block в зависимости от выбраного элемента

Всем привет,
есть два списка, в одном списке - отделы, во втором - сотрудники.
При выборе из первого списка, во втором показываются сотрудники этого отдела.
Скрипт я реализовал так:

$(document).ready(function(){
	$("#spisok1").change(function(){
		var val = $("#spisok1").val();
		if (val == "test/1"){
			
			$(".test/1").css("display", "block");
		}else if (val == "test/2"){
			$(".test/2").css("display", "block");
		}else if (val == "test/3"){
			$(".test/3").css("display", "block");
		}else if (val == "test/4"){
			$(".test/4").css("display", "block");
		}else if (val == "test/5"){
			$(".test/5").css("display", "block");
		}
	});
});

Т.е класс нужных элементов во втором списке такой же, как значение в первом.
у элементов второго списка изначально стоит display:none
Но этот скрипт почему-то не работает,
ЧЯДНТ?

селектор, возможно, невалидный.

Да нет, валидный.
я грешу на "/" в названии класса, или это не ошибка?

Сам спросил, сам ответил XD
проблема именно в "/"

О, вот другой вопрос:
после того, как мы выбрали отдел в первом списке, во втором появился сотрудник с нужным классом.
Но если выбрать после этого другой отдел в первом списке, то уже появившийся сотрудник не пропадает (display:block остается), и появляется нужный сотрудник.
Можно ли как-то запретить вывод элементов абсолютно всех классов в этом списке кроме нужного?
(что бы к каждому if/else if не писать, что один класс с display:block, а все остальные display:none)

$(.test-1,.test-2).hide().filter('.'+this.value).show();