javascript - 如何从选择的 HTML 下拉菜单中提取值？

Question

如何在其上方的 div 中显示所选的选项名称？如果用户选择了蓝色，我希望蓝色显示在上方。

<div id='text"> selection goes here</div>
<select id="dropdownselect">
<option> Red </option>
<option> White </option>
<option> Blue </option>
</select>

Answer 1

使用以下命令获取所选选项的文本:

var select = document.getElementById("dropdownselect");
var selectedText = select.options[select.selectedIndex].text;

然后，要将值添加到 ID 为 text 的 div，请使用:

document.getElementById("text").innerHTML = selectedText;

如果想每次option变化时都反射(reflect)选中的值，需要在select上附加onchange事件，结合上面的代码结果如下:

var select = document.getElementById("dropdownselect");
select.onchange = function () {
  var selectedText = this.options[this.selectedIndex].text;
  document.getElementById("text").innerHTML = selectedText;
};​

这是一个有效的 DEMO .