如何使用选择下拉菜单更改元素

Question

我正在尝试通过选择下拉菜单更改元素 - 但是，我无法让它动态更改。

<select id="optMapList">
        <option>Map 1</option>
        <option>Map 2</option>
</select>
<script>
document.getElementById("maptype").innerHTML=optMapList.options[optMapList.selectedIndex].text
</script>

Answer 1

你的代码似乎运行正常。 我想你错过了一个事实，你必须听一个'change'事件，以便能够在变化上运行代码。 这样做如下：

var optMapList = document.getElementById('optMapList');

optMapList.onchange = function() {
        document.getElementById("maptype").innerHTML = optMapList.options[optMapList.selectedIndex].text;
}

工作示例： http ： //jsfiddle.net/thijs_s/gx9mf1ct/

Answer 2

您可以在事件侦听器中使用选择列表的value属性，如下所示。

var optMapList = document.getElementById('optMapList');

optMapList.onchange = function() {
    document.getElementById("maptype").innerHTML = optMapList.value;}