Is it possible to create a List Box, with List Items in Multiple Columns? I am aware of the alternatives, but I am wondering if this is possible in <select>

Is it possible to create a List Box, with List Items in Multiple Columns? I am aware of the alternatives, but I am wondering if this is possible in <select>

• javascript
• jquery
• html
• css

2 Answers 2

No, it is not. The only allowed child-tag for select is option, which itself can only contain plain-text (but some browsers support some style-tags here, like b or i etc.).

The only pseudo-solution I can think of is using a fixed-width font for the list dropdown and then padding the content columns with spaces.

 COL1_NAME         |  COL2_NAME
 Some nice value   |  Another value
 Another nice value|  Second column

You can even try using "OPTGROUP" elements for the column names, but you have to be aware of different formattings applied by different browsers.

Update: For instance you can create a "multi-column" dropdown as seen here: http://twitpic./2lsuxx with the following HTML

<style type="text/css">* {font-family:Courier New;white-space:pre;}</style>
<select>
  <option></option>
  <optgroup label="      Col1              | Col2">
    <option>Some nice value   |  Another value</option>
    <option>Another nice value|  Second column</option> 
  <optgroup>
</select>