首先在表单标签内，在菜单内创建一个选择菜单，用书籍类别填充选项。

<p><label>Book Type:</label>
      <select name='catID' id='catID'>
      <option value=''>Select</option>
      <?php
      $stmt = $conn->query('SELECT catID,catTitle FROM book_categories ORDER BY catTitle');
      while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
          echo "<option value='$row->catID'>$row->catTitle</option>";
      }
      ?>
     </select>
    </p>

给选择菜单一个 id 供 jQuery 稍后使用，在这种情况下，我使用 catID 作为选择的名称和它的 id。

接下来创建了第二个选择菜单，再次为选择提供一个 id 供 jQuery 使用。

<p><label>Book:</label>
      <select name='bookID' id='bookID'></select>
    </p>

在页面底部包含一个加载 jQuery 的调用。

要绑定两个选择菜单，请添加一个绑定函数，该函数将在每次 id 为 catID 的选择菜单更改时运行，每次调用 ajax 函数时都会运行该函数。

ajax 函数是通过对另一个 php 文件的 GET 请求执行的，该 php 文件传入所选的 catID。

在检索成功的请求后，通过使用 .html() 并将新项目注入到具有 bookID 的 id 的选择菜单中，将 php 文件中的结果填充到第二个选择菜单中。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {

 $("#catID").bind("change", function() {
     $.ajax({
         type: "GET",
         url: "change.php",
         data: "catID="+$("#catID").val(),
         success: function(html) {
             $("#bookID").html(html);
         }
     });
 });


});
</script>

change.php

在 change.php 中建立与数据库的连接，然后从 GET 请求中收集 catID 并执行查询以选择与所选 catID 匹配的所有记录。

最后，结果被循环并回显出一个选项，该选项内的每个循环都包含 bookId 和 bookTitle。

这些将通过上一页的 jQuery 添加到第二个选择菜单中。

<?php
include('config.php');

//collect the passed id
$id = $_GET['catID'];

//run a query
$stmt = $conn->query('SELECT bookID,bookTitle FROM books WHERE catID = '.$conn->quote($id).' ORDER BY bookTitle');

//loop through all returned rows
while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
    echo "<option value='$row->bookID'>$row->bookTitle</option>";
}

把它们放在一起：

index.php

<?php require('config.php');?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>
<body>

    <form action='' method='post'>

        <p><label>Book Type:</label>
      <select name='catID' id='catID'>
      <option value=''>Select</option>
      <?php
      $stmt = $conn->query('SELECT catID,catTitle FROM book_categories ORDER BY catTitle');
      while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
          echo "<option value='$row->catID'>$row->catTitle</option>";
      }
      ?>
     </select>
    </p>

    <p><label>Book:</label>
      <select name='bookID' id='bookID'></select>
    </p>

    </form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {

 $("#catID").bind("change", function() {
     $.ajax({
         type: "GET",
         url: "change.php",
         data: "catID="+$("#catID").val(),
         success: function(html) {
             $("#bookID").html(html);
         }
     });
 });


});
</script>
</body>
</html>

change.php

<?php
include('config.php');

//collect the passed id
$id = $_GET['catID'];

//run a query
$stmt = $conn->query('SELECT bookID,bookTitle FROM books WHERE catID = '.$conn->quote($id).' ORDER BY bookTitle');

//loop through all returned rows
while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
    echo "<option value='$row->bookID'>$row->bookTitle</option>";
}

 

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。