htmldrop-down-menu

Change dropdown selected text different than actual option text

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?

Solution

  • 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/