Я нахожусь в начале жизни кодирования. Я пытаюсь изменить текст в диапазоне с выбранным параметром, но он дает мне значения, а не тексты. Например, когда я выбираю автобус, я хочу, чтобы он показывал мне текст «автобус». Я не хочу значения числа. Заранее спасибо.

<select id="vehicles" onchange="showChange()">
  <option value="1">Bus</option>
  <option value="2">Car</option>
  <option value="3">Plane</option>
</select>

<span id="vehicle"></span>

<script>
  function showChange(){
    var selected_vehicle = document.getElementById("vehicles").value;
    document.getElementById("vehicle").innerText = selected_vehicle;
  }
</script>
1
adio sang 28 Фев 2021 в 11:47

2 ответа

Лучший ответ

Вы можете сначала передать в функцию ключевое слово this, а затем получить текст, используя параметр selectedIndex .

<select id="vehicles" onchange="showChange(this)">
  <option value="1">Bus</option>
  <option value="2">Car</option>
  <option value="3">Plane</option>
</select>

<span id="vehicle"></span>

<script>
  function showChange(el){
    var selected_vehicle = el.options[el.selectedIndex].text;
    document.getElementById("vehicle").innerText = selected_vehicle;
  }
</script>
1
Mamun 28 Фев 2021 в 09:05

Если вы сохраняете встроенные объявления из своего HTML (обычно предпочтительный подход), вы можете назначить свои обработчики событий в отдельном файле. Также обратите внимание - если вы отправляете данные формы традиционным способом (а не с помощью AJAX и т. Д.), Тогда элементу select требуется имя - идентификатор НЕ появится в массиве REQUEST!

    document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
        e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
    })
<select name='vehicles'>
  <option selected hidden disabled>Select mode of transport
    <option value='1'>Bus
    <option value='2'>Car
    <option value='3'>Plane
</select>

<span id='vehicle'></span>
0
Professor Abronsius 28 Фев 2021 в 09:05