Why does my function runs only once on onClick event in button?

I've searched, but could't find a solution to my problem. I'm not an JS expert, just a novice, but I can't figure out why this works only once. I have a SELECT droplist and I wanted to execute different instructions on different option selected.

I have 4 html blocks of text, only 1 is visible (display:block), the others are hidden (display:none). What I want to achieve here is to show only the selected block and hide the others, when I click the button.

Here's the code I've got:

<select id="dynamic_select">
<option value="opt1">Display html block 1</option>
<option value="opt2">Display html block 2</option>
<option value="opt3">Display html block 3</option>
<option value="opt4">Display html block 4</option>
</select>

<button onClick="filter()">Filter</button>

<script>
function filter() {
if (document.getElementById('dynamic_select').value == 'opt1'){
   document.getElementById('html_block_1').style.display = 'block';
   document.getElementById('html_block_2').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
if (document.getElementById('dynamic_select').value == 'opt2'){
   document.getElementById('html_block_2').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
if (document.getElementById('dynamic_select').value == 'opt3'){
   document.getElementById('html_block_3').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
}
if (document.getElementById('dynamic_select').value == 'opt4'){
   document.getElementById('html_block_4').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_3').style.display = 'none';
   }
}
</script>

When I select one of options and click the button, it works as it supposed to. But when I select other option and click the button for the second time - it does nothing. The function executes only once.

Is there a simple way to fix it?