How can I put HTML table inside a dropdownbox?

Question

How can I put HTML table inside a dropdownbox? So, something like:

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

or

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

Answer 1

With pure CSS and HTML this is not possible.

javascript is probably your best way to approach this. Using Jquery will also help your javascript tremendously

Answer 2

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.

Look for example at javascript libraries that are enhancing the standard select element, for instance Chosen . Maybe you can get a little inspiration there on how to implement your table-logic.

Answer 3

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.

Answer 4

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>');

Answer 5

What you want to achieve is not possible using the select -tag only. Within this tag only optgroup - and option -tags are allowed. See on w3c.org: " 17.6 The SELECT, OPTGROUP, and OPTION elements ".

When we go further to the option -tag, you'll see that the Content Model only allows text within this element. Again on w3c.org: " 4.10.12 The option element "

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.

In this demo on jsfiddle you can see an example, how a possible solution could look like. This one works without JavaScript, as the content is displayed on :hover . But of course you can change this to an click -event using JavaScript or jQuery.