动态选择框

时间:2012-08-11 08:44:50

标签: php javascript mysql

我正在学习Php& Mysql的。

我有一个带有2个表的数据库(练习)。一个是类别,另一个是子类别。

在我的html表单中,有一个选择框数据列表,它来自Category表。 所以我需要,如果我选择此列表框,他们将从子类别表中显示另一个选择框数据,该表与分类表相关。例如:

类别表

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

先谢谢。

2 个答案:

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

答案 1 :(得分:0)

你需要Ajax才能完成这项工作,在第一个下拉列表中选择一个值后,你会通过ajaxnto发送另一个php文件的请求,该文件将根据第一个选择给你生成的子类别。然后,Ajax将在您的第二个下拉列表中插入此新数据。 您还可以从jquery库中查看post函数,这将使整个过程变得更加容易。