Как подставить в значение select текстовую метку?

Question

[maiskiykot]

Привет. Пытаюсь решить следующую задачу:

<select>
  <option value="1">One</option>
  <option value="2">Two</option>...

Нужно при выборе значения пользователем поменять значение value на текстовую метку. Чтобы форма передала к примеру One а не 1. Всем спасибо!

Comments

[Vadim Bogomazov]

Почему сразу value="One" в разметке не написать?

[maiskiykot]

Vadim Bogomazov, Потому что разметку трогать нельзя

[Сергей delphinpro]

maiskiykot, правильно. лучше костылей наделать =)
Есть реально объективная причина не трогать разметку?

[Михаил Ушенин]

Поменяйте DOM — JavaScript-кодом, который сработает до того, как пользователь сможет выбирать значения этого select.

[Сергей delphinpro]

При загрузке страницы собирайте все селекты и перебирая опции циклом, меняйте в них значения на текстовые.

[maiskiykot]

Сергей delphinpro, Вы меня за идиота принимаете? Если я говорю, что разметку трогать нельзя - значит нельзя! Зачем это мусолить?

[maiskiykot]

usheninmike, До того тоже нельзя

[maiskiykot]

Сергей delphinpro, У меня идет обработка этого поля по id. Я не могу ее менять на текстовую - геморрно.

[maiskiykot]

Господа, мне хватит одного велосипеда, который я изобретаю. Не предлагайте другие велосипеды.

Answer 1

[Ilya Olovyannikov]

const select = document.querySelector('#select');
const options = select.querySelectorAll('option');

select.addEventListener('change', () => {
  options.forEach(opt => {
    opt.selected ? opt.value = opt.innerHTML : ''
  })
})

Comments

[maiskiykot]

Сорри, забыл упомянуть - весь скрипт на jquery

[Ilya Olovyannikov]

maiskiykot, это важно? Код валиден и для jQ