jQuery简单自动添加项表单

Question

我希望创建一个非常简单的jQuery“自动完整表单”，允许个人根据严格的列表“添加”多达10首他们最喜欢的歌曲，并将其“前10首”列表提交到数据库中。它最终应该是所有的jQuery花哨喜欢。

问题：，用jQuery向页面“添加”结果行的简单方法是什么？也许附加？

，让我们开始吧.

我已经在MySQL数据库中列出了x个“歌曲”的变量列表。示例：

songID  | SongName
   1    | Song Title 1
   2    | Song Title 2
   3    | Song Title 3
  ...   | ...etc...
  100   | Song Title 100

接下来，我有一个用户歌曲表，它将存储他们挑选的前10首歌曲。

songID  | userID
  2     |   1
  3     |   1
 ...    |  ...
  1     |   8
  8     |   8
 ... etc.

最后，我有一个用户表(不需要在这里显示，它非常简单)

，所以我需要做什么？

这第一个版本将是非常简单的，没有花哨的打嗝和什么-不。

1. 添加歌曲：类型歌曲到“自动完成”字段基于MySQL歌曲列表。
2. 选择歌曲，然后将其添加到他们的“前10名”列表中
3. 限制添加10首歌曲，将歌曲列表限制到数据库列表
4. 添加10首歌曲后，用户按submit并将其张贴到数据库中。
5. 全都做完了!

http://www.ppleasysavings.com/images/Untitled-1.jpg下面的屏幕截图示例

我有一个基本的基于javascript+php的脚本，我正在开发，但在使这个“更好”的过程中，通过张贴建议，我将更新我的脚本。

Answer 1

将事件处理程序函数绑定到“添加”按钮单击事件。

http://api.jquery.com/click/

从下拉复选框中获取当前选定的值。

http://api.jquery.com/val/

然后将其追加到list元素(div、span等)，增加一个计数变量，如果它等于10，不要追加它并显示错误消息。

http://api.jquery.com/append/

将事件处理程序函数绑定到“保存”按钮单击“事件”。

循环遍历列表元素中的每个项，构建存储所需的列表项和值的数组。您还可以在这里检查它们是否至少选择了10项。

http://api.jquery.com/jQuery.each/

(或者，当您将其添加到显示列表中时，也可以将值放在数组中，而不是稍后遍历元素，这实际上更好。在将移除功能添加到临时列表之前，它会变得更加复杂。)

将数据发布到php后端函数，该函数保存结果。

http://api.jquery.com/jQuery.post/

在成功上显示成功信息。

http://api.jquery.com/html/

Answer 2

您可以使用jQueryUI自动完成。

可以为select事件设置回调，这将向表单添加隐藏输入，如下所示：

<input type="hidden" name="to_song_id[]" value="__SELECTED_ITEM__.id" />

并更新歌曲列表包装器的html。