我的javascript不是很好,但我正在努力学习。在这个问题上已经呆了好几天了,不愿意寻求帮助,但需要一个提示:)
我有一个下拉菜单,有两个SELECT下拉。
<select name="programSelect" onchange="setLanguage()" id="programList">
</select>
<br>
<select name="languageSelect" id="languageList">
</select>
Javascript(后面的代码)从XML创建下拉列表。效果很好!
我现在正试着完成一些简单的事情,从一件事开始。
当我提交我的表单时,它通过POST传递一个变量到同一页面。当搜索发生时,下拉菜单重新出现。
由于第一个下拉菜单的onClick使第二个下拉菜单填充,当页面重新加载时,下拉菜单没有填充。我做了一个不太好的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>
在这里,我们希望在页面提交之间保持选择框的选择。为此,我们可以使用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);
这只是一个概念