如何从HTML下拉菜单中提取值

How do I pull the value from a selection of a HTML drop down menu?

本文关键字：提取 下拉菜单 HTML      更新时间：2023-09-26

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

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

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

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

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

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

如果您想在每次选项更改时反映所选值，则需要将onchange事件附加到select，再加上上面的代码，结果如下：

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

这是一个正在运行的演示。

只需添加onchange javascript事件：

<div id="text"> selection goes here</div>
<select id="dropdownselect" onchange="document.getElementById('text').innerHTML = this.options[this.selectedIndex].text;">
    <option> Red </option>
    <option> White </option>
    <option> Blue </option>
</select>​​​​​​​​​​​​​​

您应该使用javascript框架来简化它。我个人使用jQuery，在这种情况下，获取值的javascript是：

$("#dropdownselect").val()

您可以使用自动更改

<select id="dropdownselect" onChange="$('#text').text($(this).val());">

MooTools或我以前没有使用过的其他框架也提供了类似的功能。

jQuery可以通过以下方式提供：

<script src="jquery.js"><!-- assuming you have a jquery file at this location -->

var selectBox = document.getElementById("dropdownselect"),
    textDiv = document.getElementById("text");
textDiv.innerText = selectBox.options[selectBox.selectedIndex].text;

但我也建议使用jQuery。

相关文章：