Как сделать вывод информации из поля select на сайте онлайн?

Question

[Константин Баскаков]

Здравствуйте, Уважаемые знатоки!

Я не силён в JS, поэтому прошу помощи у Вас.

Как сделать так, чтобы из поля "pole-3" инфа выводилась онлайн, как с полей "pole-1" и "pole-2"?

Но вся проблема в том, что у pole-3 значения value в опциях переименовывать нельзя, т.к. эти значения пойдут в БД и будут движком обрабатываться в последствии, а мне надо выводить не 0 или 1 на фронте сайта, а Выбор №1 или Выбор №2.

Заранее, Благодарю за помощь и ответы!

<h1>Заполняем форму</h1>
<input type="file" name="pole-1" id="pole">
<input type="text" name="pole-2" id="pole-2">
<select name="pole-3" id="pole-3">
	<option value="0">Выбор №1</option>
	<option value="1">Выбор №2</option>
</select>
<h2>Вывод информации</h2>
<p><img src="" id="showPole-1"></p>
<p><span id="showPole-2"></span>, <span id="showPole-3"></span></p>

<script>
	function show_input_info(input, el) {
		document.querySelector(input).addEventListener('input', e => {
  			document.querySelector(el).innerText = e.target.value;
		});
	}
	function set_img_from_input(input, el) {
		document.querySelector(input).addEventListener('change', e => {
			const fr = new FileReader();
			fr.onload = function () {
				document.querySelector(el).src = fr.result;
			}
	    	fr.readAsDataURL(e.target.files[0])
		});
	}
	set_img_from_input('#pole-1', '#showPole-1');
	show_input_info('#pole-2', '#showPole-2');
	show_input_info('#pole-3', '#showPole-3');
</script>

Answer 1

[Александр]

Для <select> надо отдельно обработать значения.

function show_input_info(inputSelector, elSelector) {
    const input = document.querySelector(inputSelector);
    const el = document.querySelector(elSelector);

    input.addEventListener('input', () => {
        if (input.tagName === 'SELECT') {
            el.textContent = [...input.selectedOptions]
                .map((option) => option.textContent.trim())
                .join(', ');
        } else {
            el.textContent = input.value.trim();
        }
    });
}

Comments

[Константин Баскаков]

Смотри как получается, да, работает, я не спорю, но он в <span id="showPole-3"></span> отдаёт "0" или "1", а надо "Выбор №1" или "Выбор №2".
Может в опцию прописать кроме value="0" еще и типа data="Выбор №1"?
Ну, я просто как вариант.

[Александр]

Константин Баскаков, Точно?