Простая задачка со списком select

[Malkis]

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

<select>
  
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
  
</select>

И есть 4 блока div которые зависят от выбранного пункта списка.

<div id="parent_block">
  <div id="1" class="contacts"></div>
  <div id="2" class="contacts"></div>
  <div id="3" class="contacts"></div>
  <div id="4" class="contacts"></div>
</div>

Точнее которые должны зависеть. Например я выбираю "Пункт1" и он становится виден, а остальные скрываются. Выбираю пункт 3 становится виден блок с id="3", а все остальные скрываются. Как правильнее организовать? Такая вот задача. Может у кого в шаблонах есть...Хотелось бы если не готовый код, то хотябы небольшой кусочек что бы я его сам уже доработал. Заранее спасибо. Не судите строго за простецкий вопрос, ибо новичек. Пытаюсь разобраться.

[danik.js]

<select>
  <option>Выберите</option>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
   
</select>

<div id="parent_block">
  <div id="1" class="contacts">1 Block</div>
  <div id="2" class="contacts">2 Block</div>
  <div id="3" class="contacts">3 Block</div>
  <div id="4" class="contacts">4 Block</div>
</div>
<script>
    var select = document.querySelector('select');
    var blocks = document.querySelectorAll('#parent_block div');
    function hideBlocks(except) {
        for (var i = 0; i < blocks.length; i++) {
            blocks[i].style.display = (i === except) ? '' : 'none';
        }
    }
    select.onchange = function() {
        hideBlocks(this.selectedIndex - 1);
    };

    this.hideBlocks();
</script>

[рони]

this.hideBlocks();

this зачем?

[danik.js]

this зачем?

Откуда я знаю )) Писалось спросонья..