更新
现在我已经走到了这一步，我想我会被困在最后！！我现在已经用"process.php"处理了这两个菜单，并将我的查询输出回index.php。
process.php
<?php
$menu1 = $_POST["menu1"];
$menu2 = $_POST["menu2"];
if($menu1 == 0) {
$sql = "SELECT * FROM Language WHERE ID = " . $menu2;
} else if($menu1 == 1) {
$sql = "SELECT * FROM Mathematics WHERE ID = " . $menu2;
} else if($menu1 == 2) {
$sql = "SELECT * FROM Culture WHERE ID = " . $menu2;
}
echo $sql;
?>index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var data = {
Language: ["","Noun Game","Phonetic Noun Box"],
Mathematics: ["","Number Rods","Sandpaper Numerals"],
Culture: ["","Concept of Time-Clock"]
}
// populate menu1
for (var i in data) {
$('#menu1').append('<option>' + i + '</option>');
}
// populate menu2 based on menu1 value
$('#menu1').change(function() {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
$('#menu2').append('<option>' + data[key][i] + '</option>');
}
}).trigger('change');
});//]]>
</script>
</head>
<body>
<form id="form" action="process.php" method="post">
<select id="menu1" name="menu1"></select>
<select id="menu2" name="menu2"></select>
<input id="submit" type="submit" value="ENTER" />
</form>
<div id="resultsContainer"></div>
<script>
$(document).ready(function(){
//alert('jQuery loaded');
$('#form').submit(function(event){
event.preventDefault;
menu1value = $('#menu1')[0].selectedIndex;
menu2value = $('#menu2')[0].selectedIndex;
$.post('process.php',{menu1:menu1value,menu2:menu2value}).done(function(data){
alert(data);
})
return false;
})
})
</script>
</body>
</html>现在我只需要在index.php上的一个表中输出查询。我想这只是循环输出，但我不确定。。。请帮忙。
我假设您希望使用ajax填充这两个选择。
也就是说，你的脚本可能与此类似：
$('#menu1').ajax({
type: "POST",
cashe: false,
url: 'processing-page.php',
success: function(data){
// use data to make the options
}
});
$('#menu2').on('click', function(){
.ajax({
type: "post",
cashe: false,
url: 'processing-page.php',
data: {val1: Val1, val2: Val2},
success: function(data){
// make options with the data
}
});
});
您必须创建一个单独的php页面，该页面将查询数据库并通过ajax将结果发回。
抱歉，这看起来有点奇怪。我把它打在电话里了。让我知道这是否对你有效，或者是否有什么需要澄清的地方。
更新：这是我知道如何使用ajax返回多个值（如查询）的唯一方法。在处理页面中，我将查询格式化为要发送回的字符串
processing-page.php：
<?php
switch ($_POST["menu1"]) {
case "Language":
$result1 = mysql_query($sql1);
$result2 = mysql_query($sql2);
$result3 = mysql_query($sql3);
$result4 = mysql_query($sql4);
break;
case "Mathematics":
// and so on...
break;
}
}
$allResults = array($result1, $result2, $result3, $result4);
$allResultStr = "";
// make the queries into strings
foreach($allResults as $result){
$allResultStr = $allResultStr . $result[key1] ."|". $result[key2] . ",";
}
$allResultStr = substr($optionArray, 0, -1); // takes the last comma off
echo $allResultStr;
?>
在脚本中，我使用split()函数分解字符串
Javascript：
function(data){ // data is $allResultStr
var options = data.split(",");
for(var option in options){
var parts = options[option].split("|");
var newOption = document.createElement("option");
// make the option values and text based on the results
newOption.value = parts[0];
newOption.innerHTML = parts[1];
document.getElementById("#menu2").options.add(newOption);
}
}