动态依赖下拉菜单与ajax php mysql


Dynamic Dependant Dropdown menu with ajax php mysql

我正试图将动态下拉框作为一种搜索工具,以帮助缩小mysql服务器的显示数据范围。我是一个不错的php程序员,但需要javascript和ajax方面的帮助。

该网站目前由3个页面组成:index_test.php、dropdown.php和dropdown.php.

在index_test.php上,有4个下拉菜单需要填充信息。第一个是在页面加载时使用php从mysql表中填充状态名。第二个框使用.change()填充,该框引用php代码,并显示mysql表中处于选定状态的学校。然后,第三个框应该取第二个框中的选定值,并向用户显示选定学校的类名,这一步就是代码中断的地方。php在通过提交表单进行测试时可以工作,但我希望能够在不刷新页面的情况下填充最后两个框。mysql表的格式为:表学校:(学校id,学校,州)表类:(class_id,school_id,class_abrv,class_number)

感谢您的帮助

index_test.php的代码:

<?php include_once("connect.php"); ?>
<html>
<head>
<title>ajax</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function(){
var state = $("#state").val();
$.ajax({
type:"post", 
url:"dropdown.php", 
data:"state="+state, 
success: function(data) {
$("#school").html(data);
}
});
});
$("#school").change(function(){
var state = $("#school").val();
$.ajax({
type:"post", 
url:"dropdown2.php", 
data:"school="+school, 
success: function(data) {
$("#classname").html(data);
}
});
});
});
</script>

</head>
<body>
<h1>Get Notes:</h1>
<br/>
<form action="dropdown2.php" method="post">
State: <select id="state" name="state">
<option>--Select State--</option>
<?php   
$sql = "SELECT states FROM states";
$result = mysql_query($sql);
while ($output = mysql_fetch_array($result)) {
$state_name = $output['states'];
echo "<option value='"$state_name'">$state_name</option>";
}       
?>
</select>
<br/>
School: <select id="school" name="school">
<option>--Select School--</option>
</select>
<br/>
Class Name: <select id="classname" name="classname">
<option>--Select Class Name--</option>
</select>
<br/>
Class Number: <select id="classnumber" name="classnumber">
<option>Select Class Name</option>
</select>
<br/>
<input type="submit" value="Search" />
</form> 

</body>
</html>

Dropdown.hp:

<?php
include_once("connect.php");
$state=$_POST["state"];
$result = mysql_query("select schools FROM schools where states='$state' ");
while($school = mysql_fetch_array($result)){
echo"<option value=".$school['schools'].">".$school['schools']."</option>";
}
?>

Dropdown2.php

<?php
include_once("connect.php");
$school=$_POST['school'];
$result = mysql_query("SELECT school_id FROM schools WHERE schools='$school' ");
$school_id = mysql_fetch_array($result);
$id = $school_id['school_id'];
$classname = mysql_query("SELECT DISTINCT class_abrv FROM classes WHERE school_id='$id'           ORDER BY class_abrv asc");
while($class = mysql_fetch_array($classname)){
echo"<option value=".$class['class_abrv'].">".$class['class_abrv']."</option>";
} 
?>

在第二个ajax函数中,您已经将school下拉框值分配给了state变量,但您将变量school传递给了ajax post。所以,并没有学校变量是你出错的原因。

$("#school").change(function(){
 var *state* = $("#school").val();
 //above variable should be school.
 $.ajax({
  type:"post", 
  url:"dropdown2.php", 
  data:"school="+*school*, 
  success: function(data) {
   $("#classname").html(data);
  }
 });
});