Html Select Problem

I have some long text in a html select element. When a user selects one option the text is displayed as long as the select is.开发者_如何学运维

What is a best solution to make this usable and clear ?

Example

<select>
<option>very long text 1</option>
<option>very long text 2</option>
<option>very long text 3</option>
</select>

The user will see something like " very long t " because of the select element length. Is there a jquery script or some trick to make the entire text visible ?

I usually truncate the display value (using ... suffix) so that it won't mess up the drop down list, then I set the actual long value as option title:-

<select>
    <option value="1" title="the brown fox jumped over the fence">the brown fox...</option>
    ...
</select>

One option is to replace the <select> with a set of radio buttons / labels. You have more options for formatting the text, and it'll be easier to read.

Or, if don't need to have all the text in the select box, you could shorten the text on the options - maybe use javascript to populate another area on the page with a detailed description of the option they just selected.

Edit -- To lengthen the <select> box, you can set its css width with style="width:250px;", or whatever width you need. (Or put the style in a class, obviously)