[英]How can I put HTML table inside a dropdownbox?
How can I put HTML table inside a dropdownbox?如何将 HTML 表格放入下拉框? So, something like:所以,像这样:
<select>
<table></table>
</select>
or
<select>
<option>
<table></table>
</option>
</select>
With pure CSS and HTML this is not possible.使用纯 CSS 和 HTML,这是不可能的。
javascript is probably your best way to approach this. javascript 可能是解决此问题的最佳方式。 Using Jquery will also help your javascript tremendously使用 Jquery 也将极大地帮助您的 javascript
You will need some custom self-made element if you want to do this.如果您想这样做,您将需要一些自定义的自制元素。 There are no other HTML tags allowed in an <option>
tag. <option>
标签中不允许有其他 HTML 标签。
Look for example at javascript libraries that are enhancing the standard select element, for instance Chosen .例如,查看增强标准 select 元素的 javascript 库,例如Chosen 。 Maybe you can get a little inspiration there on how to implement your table-logic.也许你可以在那里得到一些关于如何实现你的表逻辑的灵感。
I think you can't do such that..you have to stimulate that.我认为你不能那样做……你必须刺激它。
You need to construct a div with multiple rows and add down arrow to the first row to make it look like dropdownlist.您需要构造一个具有多行的 div 并在第一行添加向下箭头,使其看起来像下拉列表。
although you can do this way: 尽管您可以这样做:
$('select option').append('<table><tr><td>value</td></tr></table>');
more options 更多选择
$('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>');
What you want to achieve is not possible using the select
-tag only.仅使用select
-tag 无法实现您想要实现的目标。 Within this tag only optgroup
- and option
-tags are allowed.在这个标签中,只允许使用optgroup
- 和option
-tags。 See on w3c.org: " 17.6 The SELECT, OPTGROUP, and OPTION elements ".请参见 w3c.org:“17.6 SELECT、OPTGROUP 和 OPTION 元素”。
When we go further to the option
-tag, you'll see that the Content Model only allows text
within this element.当我们进一步查看option
-tag 时,您会看到内容模型只允许此元素中的text
。 Again on w3c.org: " 4.10.12 The option element "再次在 w3c.org 上:“ 4.10.12 选项元素”
So the only way to get this one going is to create an element that looks and behaves similar to the option
-tag using other HTML elements.因此,实现这一目标的唯一方法是使用其他 HTML 元素创建一个外观和行为类似于option
-tag 的元素。
In this demo on jsfiddle you can see an example, how a possible solution could look like.在jsfiddle 上的这个演示中,您可以看到一个示例,说明可能的解决方案是什么样的。 This one works without JavaScript, as the content is displayed on :hover
.这个不需要 JavaScript,因为内容显示在:hover
。 But of course you can change this to an click
-event using JavaScript or jQuery.但是当然您可以使用 JavaScript 或 jQuery 将其更改为click
事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.