0

我有一个从数据库填充的表。一旦用户更改了选择框选项，我将如何仅填充此表？我想我需要我们的 AJAX 和 onchange 作为下拉列表的查询将改变等待下拉选择，虽然我不知道如何去做。我知道这不会太难，但我需要先看一个例子才能理解它并在其他地方应用。

使用 php 5.2

我尝试按照 W3 示例进行操作，但它们似乎并未涵盖该领域。更多加载现有文件以呈现文本。我不确定如何将其应用于此。

<td style="vertical-align: top;">
   <select name="caseless_numbers" id="ValTwo" class="DropChange">
       <option value=""></option>
       <option value="1">A</option>
       <option value="2">B</option>
       <option value="3">C</option>
       <option value="4">D</option>
   </select>
</td>
4

4 回答 4

1

这是我将如何做到的。

将表格包装在一个名为tablewrap或其他的 div 中，然后将更改事件添加到下拉列表中。使用 jQuery 帖子，您可以将值作为调用的变量发送selection到 php 脚本以制作表格，然后将结果用作 div 的 html：

$("#ValTwo").on("change", function() {
    $.post("getTableData.php", { selection: $(this).val()  },   function(data) {    
    $("#tablewrap").html(data.table);   
    }, "json");
});
于 2013-08-12T15:45:20.597 回答
0

您想继续阅读XMLHttpRequest以及如何使用它们。

网上有几十篇文章非常详细地讨论了如何做到这一点。

于 2013-08-12T15:40:16.697 回答
0

在不知道您使用什么作为服务器端语言的情况下，我无法举一个例子。这是一个使用 ASP.NET MVC4 服务器端的 ajax 帖子示例。

jQuery：

$('#ValTwo').change(function(){
  $.ajax({
    type: "POST",
    url: "/{controller}/{action}/",
    data: { 'Selection' : $('#ValTwo').val() }, //PASSES BACK SELECT VALUE
    dataType: "json",
    success: function (data, text) {
      //APPEND TABLE HERE, 'data' WILL CONTAIN ANYTHING RETURNED
  });
});

注意：加载后添加到页面的任何输入/选择/文本区域控件（即：在成功方法中）都需要用于$.live添加任何事件侦听器。

关于 Ajax 的 jQuery 文档：http: //api.jquery.com/jQuery.ajax/

于 2013-08-12T15:45:30.663 回答
0

构建您自己的 AJAX 机制来做到这一点有很多话要说——作为一项学术练习。但是，如果您想要一个具有最大跨浏览器兼容性和强大功能集的强大解决方案，我建议您查看 jQuery 和datatables的组合。如果没有 AJAX 工作原理的安全基础，很多数据表的功能就会变得晦涩难懂，但我发现这种组合在生产环境中可以极大地节省时间和精力。

使用这条路线，您需要仔细查看服务器端处理示例。需要注意的是，您可以为此选项属性使用脚本 URL 或回调函数，并且您可以强制数据表在 on-change 事件中从服务器中重新提取（查看fnReloadAjax 插件）。

掌握这些工具有一些混淆的余地，但它们非常强大，从长远来看会赢得他们的青睐。

于 2013-08-12T17:29:33.363 回答