CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
alexzm1
alexzm1

Reputation: 573

HTML SELECT List showing description in columns for every OPTION

I want to showin my HTML SELECT the values from the list on something like this for every OPTION

DESCRIPTION | TYPE
-------------------
CAR          TERRESTRIAL
AIRPLANE     AIR
SHIP         WATER

something like that, it is possible??? Thanks.

Upvotes: 3

Views: 6847

Answers (3)

Joseph Marikle
Joseph Marikle

Reputation: 78590

Demo

There's already something out there sort of like that.

<select>
  <optgroup label="Terestrial">
    <option value="Car">Car</option>
    <option value="Tank">Tank</option>
  </optgroup>
  <optgroup label="Air">
    <option value="Airplain">Airplain</option>
    <option value="Helicopter">Helicopter</option>
  </optgroup>
  <optgroup label="Water">
    <option value="Ship">Ship</option>
    <option value="Submarine">Submarine</option>
  </optgroup>
</select>

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92334

Like David Thomas said. This is not really supported. But you can hack it. Make your font monospaced and space your option text object accordingly with non-breaking spaces.

Example: http://jsfiddle.net/Aq5LS/

To make it really nice, you need to implement your own combo box. Or use one like Ext JS's, http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/forum-search.html . Using Ext-JS just for this is definitely overkill, but it shows you what can be done.

Upvotes: 1

Daniel Schaffer
Daniel Schaffer

Reputation: 57871

Your options for formatting text within a standard HTML select element are pretty limited, and I don't know of a reliable way to format option elements the way you requested.

One option would be to put the description in the title attribute of each option, which would show the description when a user hovers over an option (not sure about browser coverage here).

Another option would be to use a custom dropdown box control, which would give you much more liberty to format the options as you please. Searching for "jquery dropdown" should give you a good place to start.

Upvotes: 0

Related Questions