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 hack，但并没有真正实现我想要的。

理想情况下，当页面重新加载时，我希望第一个下拉列表显示所有选项（选定项已选择），第二个下拉列表填充选定项。

代码如下。我不确定我想要做的是否简单......但提前谢谢。

这个 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);

这只是提供一个想法。