[Php] 連鎖選択メニューは素晴らしいですが、少し微調整が必​​要です


Answers

Question

現在、私はチェインの選択メニューを素晴らしいものにしています。

しかし、現在、ページがロードされると、最初のドロップダウンメニューは完全に空です。

SELECT * FROMの従業員を選択して2番目のドロップダウンからオプションを選択すると、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>';
}

?>

誰かが私が必要とするものを達成するためにスクリプトで必要とする変更を説明することはできますか?

どんなポインタにも感謝します。 非常に高く評価。