Динамические страницы с двумя полями выбора, iframe и jQuery (без PHP)

Question

Я пытаюсь создать динамическую страницу с помощью JavaScript. Я использую для этого jQuery. Идея состоит в том, чтобы избежать PHP или другого серверного языка. Я использую selectbox и iframe, но не могу понять, почему это не работает. Файл main.html показан во фрагменте. Здесь нет ошибок, но ничего не меняется на веб-странице. Целевой путь - www/materials/dev1/zad.html (опция 1 выбрана в "1", опция 2 выбрана в "zad". И т. Д. Это делает страницу динамической.) Файл main.html находится в www/main.html. Где я сделал ошибку?
Я пытался получить <select> из разных классов и даже из tagName, но я не мог сделать лучше. Я думаю, что это может быть другая функция, а не click(). Не могли бы вы посоветовать мне что-нибудь полезное?

$(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>

Answer 1

Проблема в том, что вы инициализируете переменные вне области функции щелчка, только во время загрузки страницы. Это установит значения переменной только один раз. Вы должны объявить их в обработчике кликов. Также, поскольку у iframe уже есть идентификатор, вам не нужно $('iframe#content'), Просто $('#content') было бы достаточно.

 $(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");        
  });
});

Пример: https://jsfiddle.net/DinoMyte/ejxt6y1c/1/