动态选择框答案

【问题标题】：Dynamic Select Box动态选择框
【发布时间】：2012-08-11 17:34:08
【问题描述】：

我正在学习 PHP 和 Mysql。

我有一个带有 2 个表的数据库（练习）。一个是类别，另一个是子类别。

在我的 html 表单中有一个来自类别表的选择框数据列表。 所以我需要，如果我选择这个列表框，他们另一个选择框数据将从与类别表相关的子类别表中出现。例如：

分类表

Id     Cat_name
1      O level  
2      A level.

子类别表：

id     Cat_id     Sub_name
1      1          O-level Math
2      1          O-level English
3      2          A-level Math
4      2          A-level English

提前致谢。

【问题讨论】：

标签： php javascript mysql

【解决方案1】：

如果您希望在不重新加载页面的情况下无缝高效地完成此操作，您需要查看 Jquery Ajax 功能。 Ajax 的工作方式是当有人在第一个框中进行选择时，它将将该数据发送到一个 php 脚本，该脚本可以从第一个框中获取答案，运行 mysql 查询，然后将新的子类别返回到原始页面而无需重新加载页面。

示例：在你的 test.php 中

//On selection change state, call the ajax
$("#elementid").change(function() {
 var selection = $(this).children("option:selected");

  $.ajax({
    url: 'caller.php',
    dataType: 'json',
    data: 'selected='+selection,
    success: function(data) {
      //Fill the second selection with the returned mysql data
    }
  });
}

<select id="elementid">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在你的 caller.php 中

$selection = $_POST["selected"];
//Create an array to hold all the subcategories, say the array is called $sub
echo json_encode(array(success => $sub));
exit;

请阅读Jquery.ajax

【讨论】：

我如何使用这个 Jquery Ajax 函数？
你也可以在没有 ajax 的情况下使用 javascript 数组来做到这一点

【解决方案2】：

您将需要 Ajax 来完成此操作，在您的第一个下拉列表中选择一个值后，您通过 ajaxn 向另一个 php 文件发送一个请求，该文件将为您提供基于第一个选择的结果子类别。然后，Ajax 将在您的第二个下拉列表中插入这些新数据。您还可以查看 jquery 库中的 post 函数，这将使整个过程更加容易。

【讨论】：