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

[maksqwerty]

Всем привет,
есть два списка, в одном списке - отделы, во втором - сотрудники.
При выборе из первого списка, во втором показываются сотрудники этого отдела.
Скрипт я реализовал так:
$(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
Но этот скрипт почему-то не работает,
ЧЯДНТ?

[Nexus]

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

[maksqwerty]

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

[maksqwerty]

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

[maksqwerty]

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

[Nexus]

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

[maksqwerty]

спасибо