根据父选择显示从数据库中选择的选项

Question

我有一个带有 2 个选择框的表单，这两个框都通过 php 从我的数据库中提取选项。

第一个显示按 ISBN 排序的图书列表，如下所示：

<ISBN> - <Book name>

现在，第二个选择框将列出之前选择中所选图书的所有版本（基于 ISBN），并仅显示每个版本的版本号。

我在此表单中所做的是将所选书籍的特定副本插入数据库中的特定版本及其序列号。

我尝试使用onChange 检索从第一个select 中选择的ISBN，并使用它来显示第二个选择的选项。

我使用函数dropdown() 显示图书select 和dropdownEdition() 用于版本选择：

function dropdown($intIdField, $strNameField, $strTableName, $strOrderField, 
         $strNameOrdinal, $strMethod="asc") {
   echo "<select name=\"$strNameOrdinal\">\n";
   echo "<option value=\"NULL\">Select Value</option>\n";
   
   $strQuery = "select $intIdField, $strNameField
               from $strTableName
               order by $strOrderField $strMethod";

   $rsrcResult = mysql_query($strQuery);

   while($arrayRow = mysql_fetch_assoc($rsrcResult)) {
       $strA = $arrayRow["$intIdField"];
       $strB = $arrayRow["$intIdField"] . " - " . $arrayRow["$strNameField"];
       echo "<option value=\"$strA\">$strB</option>\n";
   }
   echo "</select>";
}

function dropdownEdition($intId1Field, $intId2Field, $strTableName, $strOrderField, 
         $strNameOrdinal, $strMethod="asc") {      
    
   echo "<select name=\"$strNameOrdinal\">\n";
   echo "<option value=\"NULL\">Select Value</option>\n";
   
   $strQuery = "SELECT $intId1Field, $intId2Field
               FROM $strTableName
               ORDER BY $strOrderField $strMethod";

   $rsrcResult = mysql_query($strQuery);

   while($arrayRow = mysql_fetch_assoc($rsrcResult)) {
       $strA = $arrayRow["$intId1Field"];
       echo "<option value=\"$strA\">$strA</option>\n";
   }

   echo "</select>";
}

我基本上想要做的是在dropdownEdition() 的变量$intId2Field 中传递先前使用onChange 选择的ISBN。

问题在于我搜索了教程，但我什么都不懂，因为我从未使用过 jQuery、Javascript 或 AJAX，而且我是一个非常新手的网络程序员。这就是我在这里寻求帮助的原因。

以下是这 2 个函数的调用方式：

 <?php dropdown("book_ISBN", "book_title", "book", "book_ISBN", "book"); ?>

 <?php dropdownEdition("edition_no", "???????", "edition", "edition_no", "edition"); ?>`

????是 book_ISBN，因为我不知道如何传递它。

以下是表的连接方式：

参考资料 -

Answer 1

听起来您已经想通了，但您需要向服务器发出异步请求，将 ISBN 传递给 PHP 脚本，该脚本将执行您的 mySQL 查询。

您的 PHP 脚本将返回 mysql 结果，可能作为 JSON 对象，然后可以使用 JS 解析并格式化为 HTML。

这是我拼凑起来演示的一些代码。

HTML：

<select name="isbn-select" id="isbn-select">
  <option value="">Select an ISBN</option>
  <option value="isbn1">isbn1</option>
  <option value="isbn2">isbn2</option>
  <option value="isbn3">isbn3</option>
</select>

JS：

$('#isbn-select').on('change', function() {
  isbn = $('#isbn-select').val();
  $.getJSON('get_editions.php',
  {
  isbn: isbn
  },
  function(data) {
    var editions = [];
    $.each(data, function(index, val) {
      editions.push('<option value="' + val + '">' + val + '</option>');
    });
    $('<select/>', {
      'id': 'editions-select',
      'name': 'editions-select',
      html: editions.join('')
    }).appendTo('body');
  });
});

PHP：

<?php
// Code to select editions from your database goes here....
// Your isbn can be accessed as $_GET['isbn']
$editions_arr = array('editon1', 'edition2', 'edition3');
echo json_encode($editions_arr);
?>

我使用 jQuery 的 getJSON 方法从 get_editions.php 获取 JSON 对象。然后将结果格式化为select 并附加到 HTML 文档中。为简单起见，我没有进行任何错误检查或验证。

我希望这可以帮助您走上正轨！

编辑：

如果您希望返回格式化的 HTML 而不是 JSON 对象，您可以这样做。

JS：

$('#isbn-select').on('change', function() {
  isbn = $('#isbn-select').val();
  $.get('get_editions.php',
  {
  isbn: isbn
  },
  function(data) {
    $('body').append(data);
  });
});

PHP：

<?php
// Code to select editions from your database goes here....
// Your isbn can be accessed as $_GET['isbn']
$editions_html = '<select id="editions-select" name="editions-select">';
$editions_html .= '<option value="edition1">edition1</option>';
$editions_html .= '<option value="edition2">edition2</option>';
$editions_html .= '<option value="edition3">edition3</option>';
$editions_html .= '</select>';
echo $editions_html;
?>

您可以在此处阅读 jQuery 的 AJAX 函数：http://api.jquery.com/category/ajax/