如何將 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事件。