带有两个选择框的动态页面，iframe 和 jQuery（没有 PHP）

Question

我正在尝试使用 JavaScript 创建一个动态页面。我为此使用 jQuery。这个想法是为了避免 PHP 或其他服务器端语言。我使用选择框和 iframe，但无法理解，为什么它不起作用。 "main.html" 显示在片段中。这里没有错误，但网页没有任何变化。目标路径为www/materials/dev1/zad.html（在“1”处选择选项1，在"zad"处选择选项2。依此类推。它使页面动态化。）文件main.html 位于 www/main.html。我哪里做错了？
我试图从不同的类甚至从 tagName 获取 <select>，但我不能做得更好。我认为有可能是另一个函数，而不是 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

问题是您仅在页面加载期间初始化点击函数范围之外的变量。这只会设置变量的值一次。您需要在点击 handler.Also 中声明它们，因为 iframe 已经有一个 id，您不需要 $('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/

带有两个选择框的动态页面，iframe 和 jQuery（没有 PHP）

Dynamic pages with two selectboxes, iframe and jQuery (without PHP)

html

javascript

iframe

jquery

dynamic-pages