时间戳

首页 > 解决方案 > 选择函数来改变两个不同的值

javascript - 选择函数来改变两个不同的值

问题描述

再会，

我有一个用于选择标签的 onchange 函数，如下所示：

function dropdown() {
	var x = document.getElementById("mySelect").value;
	document.getElementById("demoA").innerHTML = "" + x;
}
<select id="mySelect" onchange="dropdown()">
	<option value="Value A1">Value B1</option>
	<option value="Value A2">Value B2</option>
</select>

<span id="demoA">Value A</span>
<span id="demoB">Value B</span>

我的目标是，根据所选选项，它不仅会更改 demoA 跨度中的值A，还会更改demoB跨度中的值 B - 例如使用显示的选项名称（值 B1或值 B2）。

有人可以帮我解决这个问题吗？如果无法检索选项标签之间的值，是否有替代解决方案可以提供相同的结果？

标签： javascripthtmlselectonchangeoption

解决方案

您可以从下拉列表中获取对当前选定选项的引用，并通过.text属性访问其文本值。

function dropdown() {
    var x = document.getElementById("mySelect");
    var val = x.value;
    var txt = x.options[x.selectedIndex].text;
    document.getElementById("demoA").innerHTML = "" + val;
    document.getElementById("demoB").innerHTML = txt;
}
<select id="mySelect" onchange="dropdown()">
    <option value="Value A1">Value B1</option>
    <option value="Value A2">Value B2</option>
</select>

<span id="demoA">Value A</span>
<span id="demoB">Value B</span>

推荐阅读