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 - 标记无法实现您想要实现的目标。在此标记内，只允许optgroup - 和option - 标记。请参阅w3c.org：“17.6 The SELECT, OPTGROUP, and OPTION elements”。

当我们进一步使用option - 标记时，您会看到内容模型仅允许此元素中的text。再次在w3c.org上：“4.10.12 The option element”

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

在这个demo on jsfiddle中，您可以看到一个示例，一个可能的解决方案如何。这个没有JavaScript，因为内容显示在:hover上。但是，您当然可以使用JavaScript或jQuery将其更改为click - 事件。

如何将HTML表放在下拉框中？

5 个答案: