多行 HTML 选项标签的解决方法是什么？答案

【问题标题】：What are workarounds for multiple line HTML option tags?多行 HTML 选项标签的解决方法是什么？
【发布时间】：2025-12-22 06:50:07
【问题描述】：

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

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

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

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

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

请分享您对如何做到这一点最好的想法。

【问题讨论】：

【解决方案1】：

我打算使用 HTML 表格

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

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

是unobtrusive，使用复选框。您可以检测对行的点击并切换复选框以扩大点击区域。

【讨论】：

【解决方案2】：

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

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'] 用作搜索数据库的条件，以查找收集他们选择的项目的所有数据。

【讨论】：