帶有兩個selectboxes，iframe和jQuery（不含PHP）的動態頁面

Question

我試圖用JavaScript創建一個動態頁面。我使用jQuery。這個想法是爲了避免PHP或其他服務器端語言。我使用selectboxes和iframe，但無法理解，爲什麼它不起作用。 「main.html」顯示在代碼片段中。這裏沒有錯誤，但網頁沒有任何變化。目標路徑是www/materials/dev1/zad.html（選項1選擇爲「1」，選項2選擇爲「zad」，依此類推，使頁面變爲動態）。main.html文件位於在www/main.html中。我在哪裏犯了一個錯誤？
我試圖從不同的類，甚至從tagName得到<select>，但我無法做得更好。我認爲這可能是另一個功能，而不是點擊（）。你能告訴我一些有用的東西嗎？

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

的問題是，你只是在頁面加載初始化點擊功能範圍以外的變量。這將只設置一次變量的值。您需要在Click處理程序中聲明它們。此外，由於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/