показать несколько блоков в select при загрузке и далее изменить выбор

HTML

<table>
  <tr>
    <td id="colorselector">
      <select name="rcat">
        <option value="xxx">option xxx</option>
        <option value="yyy" selected="selected">option yyy</option>
        <option value="zzz">option pppppppp</option>
      </select>
    </td>
  </tr>
  <tr>
    <td style="width:120px; height: 50px;">
      <div id="www" class="hide" style="display:none;">blok 1 #www</div>
      <div id="eee" class="hide" style="display:none;">blok 2 #eee</div>
      <div id="rrr" class="hide" style="display:none;">blok 3 #rrr</div>
      <div id="qqq" class="hide" style="display:none;">blok 4 #qqq</div>
    </td>
  </tr>
</table>

CSS

.hide {
    font-family: 'aleksandracregular',sans-serif;
    padding: 4px 7px;
    text-shadow: white 0 0 5px;
    font-weight: bold;
    border: 1px solid #999;
  border-radius:5px;
  margin:3px;
  background-color:#fff;
}
select{
  padding:5px 7px;
  border-radius:5px;
  margin:5px;
}

JavaScript

$('#colorselector select').change(function(){
    $('.hide').hide(300);
    $out = $(this).val();
  if ($out == 'xxx') {
    $('#qqq').show(300);
    $('#www').show(300);
  }
  if ($out == 'yyy') {
    $('#qqq').show(300);
    $('#eee').show(300);
  }
  if ($out == 'zzz') {
    $('#www').show(300);
    $('#eee').show(300);
  }
  }).change();