为什么 select returns 只有第一个值？

Question

函数中有两个值。输入 select，除了 select returns 第一个值（px）外，一切正常。我哪里弄错了？

<input id="width" onchange="Width()" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width()" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

function Width(){
var x = document.getElementById("width").value;
var y = document.getElementById("widthpixselpercentage").value;
        document.getElementById(someDiv).style.width = x + y;

}

Answer 1

您可以参考以下示例代码：

function Width(vv)
{
 alert(vv.value);
}

<input id="width" onchange="Width(this)" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width(this)" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

Answer 2

如果您希望使用 javascript 来自 select 框的值：

var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].value;

如果您希望使用 javascript 来自 select 框的文本：

var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].text;

请尝试以下操作：

function Width(){
var x = document.getElementById("width").value;
var select_box = document.getElementById("widthpixselpercentage");
var y = select_box.options[select_box.selectedIndex].value;
        document.getElementById("someDiv").style.width = x + y;

}

#someDiv{
border:1px solid;
height:5px;
}

<input id="width" onchange="Width()" type="number" placeholder="0" min="" max="" step="0.1">

<select id="widthpixselpercentage" onchange="Width()" >
<option value="px">px</option>
<option value="%">%</option>
</select>

<div id="someDiv"></div>

为什么 select returns 只有第一个值？

Why select returns only the first value?

javascript

select

onchange