选择函数以更改两个不同的值

时间:2018-07-16 11:17:45

标签: javascript html select onchange option

美好的一天,

我为选择标签提供了一个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 ,而且还会更改值B demoB 范围内的em>-例如带有显示的选项名称(值B1 值B2 )。

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

1 个答案:

答案 0 :(得分:0)

您可以从下拉列表中获得对当前所选选项的引用,并通过.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>