Как отобразить в Select Value выбранного Option?

Question

[Андрей]

Всем привет

Допустим, есть следующий селект

<select>
<option value="USD">Американский доллар USD</option>
<option value="RUB">Российский рубль RUB</option>
<option value="GBP">Британский фунт GBP</option>
<option value="EUR">Евро EUR</option>
</select>

Как сделать так, чтобы при выборе пункта в селекте появлялся value пункта. Т.е. при нажатии на "Американский доллар USD" в селекте отображался USD, и т.д.

p.s. кастомный заменитель селекта (на основе ul радиобаттонов) используется сейчас, но на мобильных устройствах это совсем не удобно.
p.p.s. максимум, чего я, пока что, смог добиться, это при нажатии на пункт в селекте добавлять в сам селект еще один пункт, например USD, и делать его активным. При повторном раскрытии списка этот пункт скрывать или удалять, но в некоторых браузерах (в том числе мобильных) этот трюк не проходит - либо пункт не скрывается, либо не всегда выбирается, и выбирается пункт с полным названием (по непонятным причинам)

Answer 1

[profesor08]

Ну тогда вам надо схитрить.

1. Расположить span возле select.
   
2. Стилизовать span под select
   
3. Сделать select маленького размера, чтоб была только стрелка.
   
4. При выборе option вставлять в span текст из value
   

Думаю ход мысли понятен.