Change span text with selected option

Question

I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.

<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>

Does this answer your question? [retrieving-the-text-of-the-selected-option-in-select-element](https://stackoverflow.com/questions/610336/retrieving-the-text-of-the-selected-option-in-select-element) — Zahra Ahangari, Feb 28 '21 at 08:54

Mamun · Accepted Answer · 2021-02-28T09:05:11.780

You can first pass this keyword to the function then get the text using selectedIndex of option.

<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>

score 0 · Answer 2 · answered Feb 28 '21 at 09:05

If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!

    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>

Change span text with selected option

2 Answers2