我的表单中有 3 个下拉列表。我希望每次用户从列表中选择时,它都会显示到文本框中。因此,如果用户从 3 个下拉列表中选择,它将显示到 3 个文本框中。问题是只有 1 个值会显示到文本框中另外 2 个不显示..这是我的代码
<script>
window.onload = function()
{
document.getElementsByName('mydropdown')[0].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>
这是我的html
<td>
<select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td>
<select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td>
<label id="mylabel">
</label>
</td>
最佳答案
您可以使用“onchange”调用常用函数并更新其中的值。由于您使用innerHTML 设置了一个值,因此它会替换之前的值。用户 += 运算符将值附加到现有值。
HTML:
this is my html
<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select></td>
<td><label id="mylabel"></label></td>
Javascript: 由于无法获取具有相同 ID 的多个元素,因此我们获取带有标签名称 label 的元素并检查它们的 ID 以选择我们所需的标签。
function changeVal(value)
{
var rows = document.getElementsByTagName('label');
for(var i in rows)
{
if(rows[i].id == 'mylabel')
rows[i].innerHTML += value;
}
}
JS fiddle : http://jsfiddle.net/xensoft/fK5m3/3/
关于javascript - 使用 javascript 将选定的值从 2 或 3 个下拉列表显示到文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15716574/