目前，我的链式选择菜单效果很好。
但是，当前页面加载时，第一个下拉菜单是完全空的。
我希望最初使用以下所有结果填充菜单： SELECT * FROM employees 然后如果用户从第二个下拉列表中选择一个选项，它将启动AJAX并根据选择过滤结果。
这可能吗？
以下是我的文件：
dept_form.html（HTML表单）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employees by Department</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script src="dept.js" type="text/javascript"></script>
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="" method="get" id="dept_form">
<select id="results"></select>
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
</p>
</form>
</body>
</html>
ajax.js：
// ajax.js
/* This page defines a function for creating an Ajax request object.
* This page should be included by other pages that
* need to perform an XMLHttpRequest.
*/
/* Function for creating the XMLHttpRequest object.
* Function takes no arguments.
* Function returns a browser-specific XMLHttpRequest object
* or returns the Boolean value false.
*/
function getXMLHttpRequestObject() {
// Initialize the object:
var ajax = false;
// Choose object type based upon what's supported:
if (window.XMLHttpRequest) {
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Older IE browsers
// Create type Msxml2.XMLHTTP, if possible:
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { // Create the older type instead:
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} // End of main IF-ELSE IF.
// Return the value:
return ajax;
} // End of getXMLHttpRequestObject() function.
dept.js：
// dept.js
/* This page does all the magic for applying
* Ajax to an employees listing form.
* The department_id is sent to a PHP
* script which will return data in HTML format.
*/
// Have a function run after the page loads:
window.onload = init;
// Function that adds the Ajax layer:
function init() {
// Get an XMLHttpRequest object:
var ajax = getXMLHttpRequestObject();
// Attach the function call to the form submission, if supported:
if (ajax) {
// Check for DOM support:
if (document.getElementById('results')) {
// Add an onsubmit event handler to the form:
$('#did').change(function() {
// Call the PHP script.
// Use the GET method.
// Pass the department_id in the URL.
// Get the department_id:
var did = document.getElementById('did').value;
// Open the connection:
ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));
// Function that handles the response:
ajax.onreadystatechange = function() {
// Pass it this request object:
handleResponse(ajax);
}
// Send the request:
ajax.send(null);
return false; // So form isn't submitted.
} // End of anonymous function.
)} // End of DOM check.
} // End of ajax IF.
} // End of init() function.
// Function that handles the response from the PHP script:
function handleResponse(ajax) {
// Check that the transaction is complete:
if (ajax.readyState == 4) {
// Check for a valid HTTP status code:
if ((ajax.status == 200) || (ajax.status == 304) ) {
// Put the received response in the DOM:
var results = document.getElementById('results');
results.innerHTML = ajax.responseText;
// Make the results box visible:
results.style.display = 'block';
} else { // Bad status code, submit the form.
document.getElementById('dept_form').submit();
}
} // End of readyState IF.
} // End of handleResponse() function.
dept_results_ajax.php
<?php # dept_results_ajax.php
// No need to make a full HTML document!
// Validate the received department ID:
$did = 0; // Initialized value.
if (isset($_GET['did'])) { // Received by the page.
$did = (int) $_GET['did']; // Type-cast to int.
}
// Make sure the department ID is a positive integer:
if ($did > 0) {
// Get the employees from the database...
// Include the database connection script:
require_once('mysql.inc.php');
// Query the database:
$q = "SELECT * FROM employees WHERE department_id=$did ORDER BY last_name, first_name";
$r = mysql_query($q, $dbc);
// Check that some results were returned:
if (mysql_num_rows($r) > 0) {
// Retrieve the results:
while ($row = mysql_fetch_array($r, MYSQL_ASSOC)) {
?>
<option value="<?php echo $row['last_name']; ?>"><?php echo $row['last_name']; ?></option>
<?php
} // End of WHILE loop.
} else { // No employees.
echo '<p class="error">There are no employees listed for the given department.</p>';
}
// Close the database connection.
mysql_close($dbc);
} else { // Invalid department ID!
echo '<p class="error">Please select a valid department from the drop-down menu in order to view its employees.</p>';
}
?>
有人可以解释我需要在脚本中进行的更改，以达到我的要求。
非常感谢任何指针。非常感谢。
答案 0 :(得分：2)
您可以通过两种方式执行此操作：首先，您可以使用PHP脚本生成dept_form.html（当然，这将成为.php文件）并将MySQL查询的所有结果放入菜单中;第二个（也是首选的，特别是对于大数据集）方法是在dept.js中if (document.getElementById('results')) {之后插入几行来加载所有数据，因此甚至在$('#did').change事件上设置函数之前。然后，这些行将简单地对PHP脚本进行AJAX调用，并获取所需的所有数据。
顺便说一句，您可能需要考虑使用jQuery，这将使您的生活在AJAX调用方面更容易。希望这有点帮助。
修改
尝试使用以下内容：
// Open the connection:
ajax.open('get', 'dept_results_ajax.php');
// Function that handles the response:
ajax.onreadystatechange = function() {
// Pass it this request object:
handleResponse(ajax);
}
// Send the request:
ajax.send(null);
然后，在您的PHP脚本中，只需添加您在else子句下已有的相同代码，但处理部门ID所需的部分除外，因此只要您{{1} }或$did子句。