Change dropdown selected text different than actual option text

Question

There's dropdown with multiple options. First option is selected one, so you can see this options text at first look at dropdown (collapsed state).

Is there any way to display only part of selected options text when dropdown in collapsed state, but when expanded, then show this corresponding option with full text?

To better understand what i want, i have made drawing: http://goo.gl/BSwOi

Answer 1

Just fix the width, for example. I used this HTML:

<select style="width: 40px">
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>

Demo: http://jsfiddle.net/MzZxG/