如何将 HTML 表格放入下拉框？

Question

如何将 HTML 表格放入下拉框？ 所以，像这样：

<select>
     <table></table>
</select>

or

<select>
    <option>
        <table></table>
    </option>
</select>

Answer 1

使用纯 CSS 和 HTML，这是不可能的。

javascript 可能是解决此问题的最佳方式。 使用 Jquery 也将极大地帮助您的 javascript

Answer 2

如果您想这样做，您将需要一些自定义的自制元素。 <option>标签中不允许有其他 HTML 标签。

例如，查看增强标准 select 元素的 javascript 库，例如Chosen 。 也许你可以在那里得到一些关于如何实现你的表逻辑的灵感。

Answer 3

我认为你不能那样做……你必须刺激它。

您需要构造一个具有多行的 div 并在第一行添加向下箭头，使其看起来像下拉列表。

Answer 4

尽管您可以这样做：

$('select option').append('<table><tr><td>value</td></tr></table>');

更多选择

 $('select option:eq(0)').append('<table><tr><td>value</td></tr></table>');
 $('select option:eq(1)').append('<table><tr><td>value</td></tr></table>');
 $('select option:eq(2)').append('<table><tr><td>value</td></tr></table>');

Answer 5

仅使用select -tag 无法实现您想要实现的目标。 在这个标签中，只允许使用optgroup - 和option -tags。 请参见 w3c.org：“17.6 SELECT、OPTGROUP 和 OPTION 元素”。

当我们进一步查看option -tag 时，您会看到内容模型只允许此元素中的text 。 再次在 w3c.org 上：“ 4.10.12 选项元素”

因此，实现这一目标的唯一方法是使用其他 HTML 元素创建一个外观和行为类似于option -tag 的元素。

在jsfiddle 上的这个演示中，您可以看到一个示例，说明可能的解决方案是什么样的。 这个不需要 JavaScript，因为内容显示在:hover 。 但是当然您可以使用 JavaScript 或 jQuery 将其更改为click事件。