Dynamic Pages With Two Selectboxes, Iframe And JQuery (without PHP)

I'm trying to create a dynamic page with JavaScript. I use jQuery for it. The idea is to avoid PHP or other server-side language. I use selectboxes and iframe, but can't understand, why doesn't it work. The "main.html" is showed at the snippet. Here is no errors but nothing changes at the webpage. The target path is www/materials/dev1/zad.html (option 1 is chosen at "1", option 2 is chosen at "zad". And so on. It makes the page dynamic.) The file main.html is located in www/main.html. Where have I done a mistake?
I tried to get the <select> from different classes and even from the tagName but I couldn't do better. I think it is possible to be another function, not click(). Could you advice me something useful?

$(document).ready(function() {
  var aside_val = $('#aside_menu').val();
  //get the value of the first selection
  var header_val = $('#header_menu').val();
  //get the value of the second selection
  var folder = 'dev' + aside_val;
  //get the value of the folder
  $('.selection').click(function() {
    $('iframe#content').attr('src', "materials/" + folder + "/" + header_val + ".html");
    //change the src attribute of the iframe in order to get the proper page
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="aside_menu" id="aside_menu" tabindex="1" style="top: 20px;" class="selection">
  <optgroup label="choose opt">
    <option class="opt" value="1">option 1</option>
    <option class="opt" value="2">option 2</option>
    <option class="opt" value="3">option 3</option>
  </optgroup>
</select>
<select name="header_menu" id="header_menu" tabindex="1" class="selection">
  <optgroup label="choose opt2">
    <option class="opt" value="zad">zad</option>
    <option class="opt" value="ooa">ООА</option>
    <option class="opt" value="scenario">scenario</option>
    <option class="opt" value="hipo">HIPO</option>
    <option class="opt" value="functions">functions</option>
  </optgroup>
</select>
<iframe src="materials/dev1/zad.html" width="986" height="600" align="center" id="content">no iframe</iframe>

The problem is that you are initializing the variables outside the scope of the click function, only during page load. This would set the values of the variable only once. You need to declare them inside the click handler.Also, since the iframe already has an id, you don't need $('iframe#content'). Simply $('#content') would be sufficient.

 $(document).ready(function() {      
  //get the value of the folder
  $('.selection').click(function() {
    var aside_val = $('#aside_menu').val();
  //get the value of the first selection
    var header_val = $('#header_menu').val();
  //get the value of the second selection
    var folder = 'dev' + aside_val;
    $('#content').attr('src', "materials/" + folder + "/" + header_val + ".html");        
  });
});

Example : https://jsfiddle.net/DinoMyte/ejxt6y1c/1/