Для начала select'у присвоить какое-то имя а в value каждого option'а прописать класс необходимого div'а:
<select name="doctors">
<option disabled selected>Все специальности</option>
<option value="pediatric-dentist">Детский стамотолог</option>
<option value="surgeon">Хирург</option>
</select>
Не забудьте и div'ам его прописать.
<div class="item">
<div class="doctor surgeon">
<!-- Дальнейший код карточки -->
</div>
</div>
Потом написать обработчик, который будет отслеживать изменения выпадающего списка и показывать соответствующие блоки.
$('[name="doctor"]').on('change', function() {
var selector = '.' + $(this).val();
var chosenItems = $(selector).closest('.item');
// Сокрытие всех блоков
$('.item').hide();
// Показ выбранных блоков
chosenItems.show();
});
Не заметил, что в тэгах нет JQuery. На всякий случай продублирую на чистом JS
var toggle = document.querySelector('[name="doctors"]');
toggle.addEventListener('change', function() {
var chosenClass = this[this.selectedIndex].value;
var items = document.querySelectorAll('.item');
Array.prototype.forEach.call(items, function(item) {
var child = item.children[0];
var childClasses = child.className.split(' ');
if (childClasses.indexOf(chosenClass) === -1) {
item.style.display='none';
} else {
item.style.display='block';
}
});
});
Пример:
https://jsfiddle.net/t3hy7mjr/2/ 
Простой