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

Question

[Shimpanze]

Есть список:

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

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



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

live_select.addEventListener('change', function() {
  // Если выбран пункт списка value="01"
  // ...отображать в окошке слово «Пирог»
  // тогда как текст самого пункта списка остался неизменным
});

Answer 1

[0xD34F]

Продублировать 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);

Comments

[Shimpanze]

Граждане, это гений!

[Shimpanze]

Прошу прощения, не могу сообразить. Список-то у меня уже готовый. Начинаю обрабатывать его:

Сам список:

<select id="live_select">
  <option value="01" data-item="рыб">Рыб.</option>
  <option selected="selected" value="02" data-item="колб">Колб.</option>
  <option value="03" data-item="скор">Скор. по.</option>
</select>

Скрипт:

// Получаю все пункты списка
let options = document.querySelectorAll('select#live_select option');

// Запускаю по каждому цикл
options.forEach( function( item ) {

  // Получаю значение value
  let option_value = item.getAttribute('value');

  // Делаю нормальные пункты меню (в оригинале - чушь)
       if ( option_value === '01' ) item.textContent = 'Рыба';
  else if ( option_value === '02' ) item.textContent = 'Колбаса';
  else if ( option_value === '03' ) item.textContent = 'Скорая помощь';


  // Получаю остальные атрибуты
  let option_data_item = item.getAttribute('data-item');

  // Начинаю создание нового элемента option

  let option = document.createElement('option');
  // Добавляю в него нужные атрибуты (такие же как у оригинала)
  option.setAttribute( 'value', option_value );
  option.setAttribute( 'data-item', option_data_item );

  // Добавляю туда же текстовый контент (который будет отображаться в заголовке) в зависимости от value
       if ( option_value === '01' ) option.textContent = 'РЫБА';
  else if ( option_value === '02' ) option.textContent = 'КОЛБАСА';
  else if ( option_value === '03' ) option.textContent = 'СКОРАЯ ПОМОЩЬ';

  // Теперь вставляю элементы в зависимости от наличия атрибута selected у оригинала

  // Если атрибут присутствует
  if ( item.hasAttribute( 'selected' ) ) {
    option.setAttribute( 'selected', 'selected' );
    item.parentNode.insertBefore( option, item.nextSibling);
  }
  // Если атрибута нет
  else {
    item.parentNode.insertBefore( option, item.nextSibling);
  }

  // Скрываю оригиналы
  item.style.display = 'none';
});

// Далее при выборе элемента выводим обманку
document.querySelector('select#mm').addEventListener( 'change', e => e.target.value = e.target.value );

Всё работает как часы, но осталась проблема, пока я не выбрал никакой пункт меню отображается «Рыба» а не «РЫБА».

Почему? Не могу сообразить...

Спасибо!

[0xD34F]

Shimpanze, не могу сообразить, почему вы решили, будто новое значение должно само собой показаться.

После того, как добавили option'ы, отправьте select'у событие change:

select.dispatchEvent(new Event('change'));.

Answer 2

[Moses Fender]

Нельзя так сделать.
Разве что сделаешь поверх этого элемента плашечку с абсолютным позиционированием, и будешь туда писать нечто.