Question

我希望按image here所示执行以下操作。基本思想是用户可以选择一个（或多个）项目，然后单击箭头将项目从一个框移动到另一个框。关键特性是每个选项必须是多行。

我目前这样做的方法是使用两个HTML选择框和两个按钮。每个项目都是一个选项。但是，因为选项不能包含多行或标记，所以我只有项目的名称，而不是价格或描述。

出于这个原因，我正在寻找一个不一定是HTML选项标签的解决方案。我一直在阅读的解决方法是使用<title>标记，但这不是我想要使用的解决方案。

我计划使用带有jQuery的HTML表来检测点击次数，并更改CSS中每个行的属性以给出它所选择的错觉等，但在我构建之前我想要一些其他的想法，因为必须是一些更成熟的解决方案。

请注意，数据需要从外部SQL数据库引入。目前我使用.ashx处理程序从后端生成前端代码。 IE <option value={0}>{0}</option>通过AJAX调用返回到选择标记之间的前端。

请分享您对最佳效果的看法。

Answer 1

我打算使用HTML表格

它看起来像表格数据（产品名称，价格），因此表格很好。

使用jQuery检测点击次数，并更改CSS中每个行的属性以给出选择的错觉等，

成为unobtrusive，使用复选框。您可以检测行上的点击，并切换复选框以展开点击区域。

Answer 2

您是否考虑过设置value选项作为数据库表中的参考？例如，db可以存储以下内容：

ID   = 1
Name = Orange
Type = Valencia
Price= $2.50

然后，您的选项可能如下所示：

<select name='fruit'> 
  <option value='1'> Orange </option> 
  <option value='2'> Banana </option> 
  <option value='3'> Apple </option> 
</select>

当用户提交表单数据时，您可以使用$_POST['name']并将其用作搜索数据库的条件，以查找收集所选项目的所有数据。