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

Question

我希望执行以下操作，如 image here 中所示。基本思想是用户可以选择一个(或多个)元素并单击箭头将元素从一个框移动到另一个框。关键特征是每个选项必须是多行。

我目前执行此操作的方法是使用两个 HTML 选择框和两个按钮。每个元素都是一个选项。但是，由于选项不能包含多行或标签，因此我只有商品名称，没有价格或说明。

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

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

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

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

Answer 1

I was planning on using HTML tables

它看起来像表格数据(产品名称、价格)，所以表格就可以了。

with jQuery to detect clicks, and change attributes of each individual row in CSS to give the illusion it is selected, etc,

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