Javascript-форум - При выборе select скрываются определенные div

Добрый день. При выборе опции в селекте должны скрываться определенные группы. Работает, но не корректно. Какие то div'ы скрываются, а какие то остаются.

<style>
div {
  display: block;
}
</style>
<div class="container">
  <h1 class="page-header">Продажа средств измерений</h1>
  <select class="form-control" id="CategoryTree">
    <option selected="selected" class="all active" value="0">Все дозиметры</option>
    <option value="1">Дозиметры для банков <span class="badge">2</span></option>
    <option value="2">Индивидуальная дозиметрия <span class="badge">3</span></option>
  </select>
</div>
<div class="row">
  <div id="bank">
    <h3>
       <a href="#">Дозиметр для банков 1</a>
    </h3>
    <p>Для банка</p>
  </div>
  <div id="individ">
    <h3>
       <a href="#">Индивидуальный 1</a>
    </h3>
    <p>Индивид</p>
  </div>
</div>
<div class="row">
  <div id="individ">
    <h3>
      <a href="#">Индивидуальный 2</a>
    </h3>
    <p>Индивид</p>
  </div>
  <div id="bank">
    <h3>
      <a href="#">Дозиметр для банков 2</a>
    </h3>
    <p>Для банка</p>
  </div>
</div>
<div class="row">
  <div id="individ">
    <h3>
       <a href="#">Индивидуальный 3</a>
    </h3>
    <p>Индивид</p>
  </div>
</div>

document.getElementById("CategoryTree")
.onchange = function() {
var b = {
1: "bank",
2: "individ"
  },
c = this.value,
 a;
for (a in b) document.getElementById(b[a])
.style.display = 0 == c || c == a ? "block" : "none"
};

<select id="items"> <option selected="selected" value="0">Все категории</option> <option title="Car" value="1">Автомобили</option> <option title="Motorcycle" value="2">Мотоциклы</option> </select> <div data-category="avto">Автомобиль 1</div> <div data-category="avto">Автомобиль 2</div> <div data-category="avto">Автомобиль 3</div> <div data-category="avto">Автомобиль 4</div> <div data-category="moto">Мотоцикл 1</div> <div data-category="moto">Мотоцикл 2</div> <div data-category="moto">Мотоцикл 3</div>

$(function() { function showContent() { var selectCategory = $("#items").val(); switch (selectCategory) { case "0": $('[data-category="avto"]').show(); $('[data-category="moto"]').show(); break; case "1": $('[data-category="avto"]').show(); $('[data-category="moto"]').hide(); break; case "2": $('[data-category="avto"]').hide(); $('[data-category="moto"]').show(); break; } } showContent(); $("#items").change(function() { showContent(); }); });

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $("#items").change(function() { $(".avto,.moto").not($(this.value).show()).hide() }); }); </script> </head> <body> <select id="items"> <option selected="selected" value=".avto, .moto">Все категории</option> <option value=".avto">Автомобили</option> <option value=".moto">Мотоциклы</option> </select> <div class="avto">Автомобиль 1</div> <div class="avto">Автомобиль 2</div> <div class="avto">Автомобиль 3</div> <div class="avto">Автомобиль 4</div> <div class="moto">Мотоцикл 1</div> <div class="moto">Мотоцикл 2</div> <div class="moto">Мотоцикл 3</div> </body> </html>