Change var value from dropdown in javascript with onchange

I have a dropdown list which looks like this:

<select id="cityID">
        <option value="mission">Mission</option>
        <option value="bakersfield">Bakersfield</option>
        <option value="knoxville">Knoxville</option>
</select>

And my code to get the value is:

var select = document.getElementById('cityID');
var text = select.options[select.selectedIndex].text;
text.innerHTML = cityID.value;

text.onchange = function(e) {
   text.innerHTML = e.target.value;
}

The value always chooses the first item. How can I get it to accept the cityID and change the page,

I’m sure its a formatting or typo or wrong value ?

Answer

You could achieve this using addEventListener also.

var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
select.addEventListener("change", (e) => {
    textEl.innerText = e.target.value;
})