使用Javascript显示DB中存在的内容

Question

我遇到了以下问题，并希望在正确的方向上指点一些。 简单来说：

我使用PHP的表格中的信息，我放在<select>标记内。 每当我单击其中一个选项（行）时，它应该加载/显示紧邻它的单元格上的某些信息。如果我单击另一个选项，它应显示不同的信息（从数据库加载）。

像这样：

点击类别，显示信息。实际上我应该在第二个细胞上有另一个子类别，但我相信如果我能解决这个问题，那么将它应用于第二/第三个细胞。

更新： 我也在考虑在该单元格中使用一个框架，一个php文档，每当用户点击其中一个选项时重新加载。那也可行吗？

Answer 1

如果您不介意只支持启用了JavaScript的客户，那么您需要的是Ajax。使用原始JavaScript完成Ajax操作是完全可能的，但我强烈建议您使用jQuery，Prototype或Closure之类的库。

使用Ajax，您可以在用户选择选项时向服务器发送请求（例如，询问该选项的详细信息），然后使用调用结果更新该部分页面的内容。

以下是使用jQuery的示例：http://jsbin.com/agipu4

......还有一个使用Prototype：http://jsbin.com/abido3

...但同样，你可以用Closure或其他任何一个做同样的事情（或者，再次，直接使用原始JavaScript和XmlHTTPRequest对象和DOM方法）。

Answer 2

您应该对数据库执行ajax调用（当然是通过PHP）来获取已编译的数据并填充它。

$('#category').change(function(){
    $('#problem').load('/url-to-fetch?selected=' + $('#category').val());
});

上面的例子是使用jQuery完成的（尽管你可以使用任何js库或普通的javascript来完成）。

代码表示如果所选类别的值发生变化，请对传递所选值的url-to-fetch进行ajax调用，然后在problem区域显示详细信息（假设问题是textarea的id。）

Answer 3

根据有多少选择或有多少数据，我认为你有2-3种基本方法。

1）如果有少量的选择/数据，请将所有可能的选项预加载到问题和解决方案单元格中作为单独的div，但是使用css（display：none）将它们全部隐藏起来。当用户在“类别”中选择一个选项时，请取消隐藏相应的div。

2）上面第1项的变体，您可以将所有数据加载到某个JS数组中，然后在选择类别时将数组的项目推送到问题和解决方案。

3）如果您的类别太多，可以使用AJAX调用来运行mySQL查询（通过PHP），并使用调用结果填充问题和解决方案单元格。

我希望这有用！