@Shimpanze

Как сделать, чтобы отображаемый select'ом текст отличался от текста выбранного option'а?

Есть список:

<select id="live_select">
  <option value="01">Рыба</option>
  <option value="02">Колбаса</option>
  <option value="03">Скорая помощь</option>
</select>


Есть ли возможность, менять текст только здесь (а не у пунктов списка)?

5cc1a246824cc957365104.png

Чтобы при выборе первого пункта меню в вышеприведённом окошке высвечивалась надпись «Пирог» а не «Рыба».

live_select.addEventListener('change', function() {
  // Если выбран пункт списка value="01"
  // ...отображать в окошке слово «Пирог»
  // тогда как текст самого пункта списка остался неизменным
});
  • Вопрос задан
  • 413 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Продублировать option'ы. Первый в каждой из полученных пар будет содержать текст, отображаемый в качестве выбранного, при этом сам он должен быть скрыт, чтобы не отображаться в выпадающем списке. При выборе следует присвоить select'у его текущее значение, чтобы выбранным option'ом (т.е. тем, чей текст будет показан в select'е) вместо видимого второго оказался скрытый первый.

select.innerHTML = [
  { val:  69, optionText:  'hello, world!!', selectText:  'HELLO, WORLD!!' },
  { val: 187, optionText:  'fuck the world', selectText:  'FUCK THE WORLD' },
  { val: 666, optionText: 'fuck everything', selectText: 'FUCK EVERYTHING' },
].map(n => `
  <option value="${n.val}" hidden>${n.selectText}</option>
  <option value="${n.val}">${n.optionText}</option>
`).join('');

select.addEventListener('change', e => e.target.value = e.target.value);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mosesfender
@mosesfender
Меланхолик, параноик, падал с коек
Нельзя так сделать.
Разве что сделаешь поверх этого элемента плашечку с абсолютным позиционированием, и будешь туда писать нечто.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы