Как выбранное значение option selected подставить в value через onchange?

Question

[web-720]

Имеем обычный select:

<select id="select">
<option>Выберите фрукт</option>
<option value="1">Яблоко</option>
<option value="2" selected>Дыня</option>
<option value="3">Арбуз</option>
</select>

Как выбранный option selected Дыня подставить туда-же в value вместо 2 через onchange?

Comments

[Максим]

Не понял, нужно именно для второго элемента в value поставить Дыня?
Или чтобы каждый option подставлял свой text в value при onchange на него?

[web-720]

Максим, Это для примера)При выборе любого option текст бы подставлялся в текущий для него value

[web-720]

web-720, я учусь)

Answer 1

[Максим]

<select id="select" onchange="func(this)">
<script>
function func(element) {
            let arr = element.getElementsByTagName('option')
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].selected == true) arr[i].value = arr[i].textContent
            }
        }
</script>

Вот этот код делает то, что ты дословно просишь.
Если нужно обратно числа возвращать в value или не обрабатывать [0] элемент arr ('Выберите фрукт') - думаю ты сам разберешься как это сделать.
Ты спросил, как сделать чтобы textContext попадал в value - я написал как это сделать =)

Comments

[web-720]

Спасибо Макс. А есть ли решение без того что-бы обвешивать select функцией? Отдельным куском. Как это правильно называется)

[web-720]

Через айдишник

[Максим]

web-720, Прости, но я не понимаю, что ты имеешь ввиду когда говоришь "без того что-бы обвешивать select функцией? Отдельным куском"

[Максим]

Максим, И да, если я тебе помог, отметь ответь пожалуйста решением. Я тут в основном сам вопросы задаю, и мне нужно лимиты увеличивать =)

[Максим]

Максим, И мой совет: бросай учить JQuery. Это дешевая обертка над джаваскриптом которая слегка упрощает синтаксис, при этом ломает понимание джаваскрипта.

[web-720]

Максим, я имею ввиду что-бы функцию привязать просто к айдишнику например есть селект document.getElementById(tratata) но не к самому тегу привязывать.

[web-720]

Максим, Макс я прислушаюсь! Мне сейчас просто от тега html убрать лишнее он должен быть чист

[web-720]

Там свои плюшки

[Максим]

Ты имеешь ввиду убрать из тега onchange функцию?

Тогда так:

let element = document.getElementById('select');
element.addEventListener('change', func);
function func() {
      let arr = element.getElementsByTagName('option');
      for (let i = 0; i < arr.length; i++) {
             if (arr[i].selected == true) arr[i].value = arr[i].textContent;
      }
}

И отметь пожалуйста мой ответ решением, я же попросил

[web-720]

Я обязательно отмечу! Очень благодарен тебе Макс. Еще и отзыв оставлю) Мне нужно проверить утром по мск

[web-720]

Да убрать из тега

[Максим]

web-720, Пожалуйста =) Код я уже проверил - все работает.

[Максим]

web-720, На всякий случай исправил, чтобы Выберите фрукт не обрабатывался и возвращались id в value не выбранных фруктов:

let element = document.getElementById('select');
element.addEventListener('change', func);
function func() {
            let arr = element.getElementsByTagName('option');
            for (let i = 1; i < arr.length; i++) {
                if (arr[i].selected == true) arr[i].value = arr[i].textContent;
                else arr[i].value = i;
            }
}

[web-720]

Максим, Макс пушка!:)

[Максим]

web-720, Я в шоке с того, что люди приходят сюда за помощью, а им даже кнопочку не нажать.
Я никогда так не поступаю.

[web-720]

Максим,