Question

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 ?

Answer 1

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>