Javascript-форум - Как сделать чтоб следующий селектор не видел спрятанные div?

Есть несколько select, которые ищут div с определенными id.
Не работает выбор по двум или более селекторам!
Работает только по одному.

Как сделать чтоб следующий селектор не видел спрятанные div? И искал по тому уже что есть!

Код выглядит так.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
$(document).ready(function() {
var $oks = $('.ok').click(function() {
  if (this.id == 'all') {
    $('#z > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#z > div').not($el).hide();
  }
  $ok.removeClass('active');
  $(this).addClass('active');
})
});
</script>

</head>
<body>

<select>
<option  class="active ok" id="all">не важно</option>
<option  class="ok" id="City">City</option>
<option  class="ok" id="NoCity">NoCity</option>
</select>  

<select>
<option  class="active ok" id="all">не важно</option>
<option  class="ok" id="1">1</option>
<option  class="ok" id="2">2</option>
</select>  

<div id="z">
     <div class="City 1">
           <h3>City</h3>
           <div>
                <span>Город:</span><span class="ok">City</span>
           </div>
     </div>
	      <div class="City 2">
           <h3>City</h3>
           <div>
                <span>Город:</span><span class="ok">City</span>
           </div>
     </div>
</div>

</body>
</html>