使用 onchange 从 javascript 中的下拉列表更改 var 值

Question

我有一个如下所示的下拉列表：

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

我获取值的代码是：

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

取值总是选择第一项。我怎样才能让它接受 cityID 并更改页面，

我确定是格式错误、拼写错误或值错误？

Answer 1

onchange 事件由 select 元素触发
您的文本变量似乎是一个 HTML 元素，因为您设置了它的内部 HTML 属性
一个 select 元素有一个“值”属性，因此您不需要从选项的 selectedIndex 中获取它。

var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
text.innerHTML = select.value;

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

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

<p id="text"></p>

Answer 2

您也可以使用 addEventListener 实现此目的。

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

使用 onchange 从 javascript 中的下拉列表更改 var 值

Change var value from dropdown in javascript with onchange

javascript

frontend