Question

我在一个页面上有一个表单，一些表单数据是从我的mysql数据库中的各个表中提取的 - 表中包含不同选择的选项，所以以下是我的数据在php脚本之后的样子运行：

 <select name="vehicleStyle">
    <option value="empty" selected="selected">- select -</option>
    <option value="coupe">Coupe</option>
    etc....
  </select>

我有第二个表单在iframe中加载此页面，第二个表单允许我更新此mysql表中包含的数据，以便我可以动态地向表单添加选项。一切都非常精细和精彩但是，如果我动态更新（添加一个值）到这个表，我必须刷新页面，以便新数据显示在主页面的第一个表格中。我玩过自动刷新页面，但这有点令人讨厌。

有没有办法通过jquery将此表单数据直接添加到我的原始页面？

我认为当您添加推文（我不使用推特）时，推特会做类似的事情，但它会将您最近的推文添加到页面顶部，而不会实际重新加载整个页面。

非常感谢！

Answer 1

我认为您想使用JS进行DOM操作。您所要做的就是将带有用户输入值的新OPTION标记附加到SELECT，如：

var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);

请记住：这只是在客户端添加一个OPTION。因此，如果您的实际表单提交（在您的iframe中）无法将数据推送到您的数据库，这将代表您的用户的不一致视图（他认为新的OPTION已创建，但实际上已失败）。

因此，您必须将UI更新与后端响应联系起来。通常，您将在更新后端的调用的AJAX响应中刷新此UI。

Answer 2

我认为最好的方法是使用load jQuery函数（http://api.jquery.com/load/）。它允许您直接从javascript加载来自网址的页面。

以下是我要做的事情：

将select的创建移动到新的url（例如fillselect.php）
加载页面而不创建select：创建一个div标签（将其命名为divforselect例如）
在页面的onload javascript事件中，写下： $("#divforselect").load("fillselect.php")这将导致div标签innerText设置为fillselect.php页面的内容。所以url fillselect.php不是一个完整的html页面，只会包含select标签。

之后，只要您想刷新选择，就可以致电$("#divforselect").load("fillselect.php")。

Answer 3

也许您应该使用AJAX填充框？然后你可以随时刷新数据。

jQuery Ajax

使用jquery将表单输入直接加载到页面中

3 个答案: