Javascript動態下拉菜單 - 在頁面重新加載時反應？

Question

我的JavaScript不是很好，但我試圖學習。現在在這一天，請求幫助，但需要提示:)

我有一個下拉菜單，有兩個SELECT下拉菜單。

<select name="programSelect" onchange="setLanguage()" id="programList"> 
    </select> 
    <br> 
    <select name="languageSelect" id="languageList"> 
    </select> 

Javascript（以下代碼）從XML創建下拉列表。它很棒！

我現在試圖完成一些簡單的事情，從一個項目開始。

當我提交表單時，它通過POST將變量傳遞到同一頁面。搜索發生，下拉菜單重新出現。

由於第一個下拉列表的onClick使第二個下拉列表填充，因此當頁面重新加載dropdwons時沒有填充。我做了一個不太好的PHP破解，但並沒有真正實現我想要的。

理想情況下，當頁面重新加載時，我希望第一個下拉菜單顯示所有選項（使用所選項目SELECTED），第二個下拉菜單使用所選項目SELECTED填充。

下面的代碼。我不確定我想要做的事情是簡單的還是不行...但是要提前感謝。

這個JavaScript在我的頁腳，它加載了一個簡單的XML文檔，已經建立了下拉層次結構。 JavaScript的第一次，然後XML：

<script type="text/javascript" language="javascript"> 
$(document).ready(init); 
//var mainXML; 
var curProgram=""; 
var curLanguage=""; 
function init(){ 
    // $("#languageList").hide(); //Dont Hide the level 2, or level 3 
    loadXML("/xml/dropdownSelections.xml"); 
} 
function loadXML(_xml){ 
$.ajax({ 
     type: "GET", 
     url: _xml, 
     dataType: "xml", 
     success: setXML 
}) // close ajax 
} 
function setXML(_xml){ 
var _idx=0; 
var curOption; 
var curCountry = $(_xml).find('country'); 
$(curCountry).each(function(i){ 
    var country = $(this); 
    curOption=$("<option value='" + $(country).attr('program') + "'>" + country.children('label').text() + "</option>") 
    $(curOption).appendTo($('#programList')) 
}) 
} 
function setLanguage(){ 
var curCountry = $('#programList').children(':selected').data('country') 
$('#languageList').html(""); // reset the languages list 
var curLang = $(curCountry).find('language'); 
$('#linkURL').html(""); 
if (curLang.length>1){ 
    curLang.each(function(i){ 
     var lang = $(this); 
     var langCode=lang.attr('langCode'); 
     if (i==0){ 
      curOption="<option value='null'>--Select Issue--</option><option value='" + langCode + "'>" + lang.text() + "</option>"; 
     }else{ 
      curOption+="<option value='" + langCode + "'>" + lang.text() + "</option>" 
     } 
    }); 
    $(curOption).appendTo($('#languageList')); 
    $('#languageList').show() 
}else if (curCountry==null){ 
    // $('#languageList').hide(); 
    curOption="<option value='null'>--Select Issue--</option>"; 
    $(curOption).appendTo($('#languageList')); 
}else{ 
    $('#languageList').hide(); 
    gotoPage($(curCountry).find('language').attr('langCode')) 
} 
} 

</script> 

和XML（只是它的第一部分，有模仿這種結構的其他部分）：我們要堅持之間選擇框中選擇

<?xml version="1.0" encoding="UTF-8"?> 
<countries> 
<country program="read-and-learn"> 
    <label>Read and Learn</label> 

    <languages> 
     <language langCode="italian">Italian</language> 
     <language langCode="french">French</language> 
     <language langCode="spanish">Spanish</language> 
     <language langCode="german">German</language> 
     <language langCode="japanese">Japanese</language> 
     <language langCode="russian">Russian</language> 
     <language langCode="dutch">Dutch</language> 
    </languages> 

</country> 

Answer 1

在這頁面提交。爲此我們可以使用PHP。

每當我們向PHP頁面提交任何包含表單字段的表單時，我們都可以訪問PHP代碼中實際選擇的內容。

因此，在我們的例子中，要訪問PHP中選定的表單字段值，我們需要使用下面的代碼。

$programSelect = $_POST['programSelect']; 
$languageSelect = $_POST['languageSelect']; 

因此，我們在PHP中提供了這些值。

當我們需要這些值後頁面加載和選擇框填充。

由於JavaScript處於同一頁面，因此在JavaScript中我們添加以下兩行。

var programSelect = <?php echo $programSelect; ?>, 
    languageSelect = <?php echo $languageSelect; ?>; 

在上述兩行中，我們將所選值從PHP傳遞到JavaScript。

現在，在填充來自XML的數據之後，現在我們需要選擇選擇表單字段中的選項。因爲我們已經使用簡單的jQuery在JavaScript中選擇了選項的值，所以我們可以選擇它們。例如：

$("#programList option[value='" + programSelect + "']").attr('selected', true); 
$("#languageList option[value='" + languageSelect + "']").attr('selected', true); 

這只是爲了給出一個想法。