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

时间:2012-06-09 14:14:29

标签: php javascript jquery mysql html

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

第一个显示按其ISBN排序的书籍列表:

<ISBN> - <Book name>

现在,第二个选择框将列出上一个选择中所选书籍的所有版本(基于ISBN),并仅显示每个版本的编号。

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

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

我使用函数dropdown()来显示版本选择的书selectdropdownEdition()

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>";
}

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

问题是我已经搜索了教程,但我无法理解任何东西,因为我从未使用过jQuery或Javascript或AJAX,而且我是一个非常新手的网络程序员。这就是我在这里寻求帮助的原因。

以下是调用2个函数的方法:

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

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

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

以下是表格的连接方式:

enter image description here

参考文献 -

1 个答案:

答案 0 :(得分: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/