javascript - 如何使用javascript将下拉列表中的选定值显示到标签

Question

我的表单中有 3 个下拉列表。我想将每个下拉列表中选定的值显示到我的标签中。问题是只有一个保管箱列表会显示，而其他两个则不会。

这是我的代码:

<script>

window.onload = function()
{

document.getElementsByName('mydropdown')[0].onchange = function(e)
{
    document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>



this is my 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>

Answer 1

您仅将第零个元素(您选择的元素)与 [0] 绑定(bind)。您需要绑定(bind)到所有这些，可能像这样:

Array.prototype.forEach.call(document.getElementsByName('mydropdown'),
function (elem) {
    elem.addEventListener('change', function() {
        document.getElementById('mylabel').innerHTML = this.value;
    });
});

http://jsfiddle.net/UNLnx/

顺便说一句，您在多个元素上重复使用相同的 ID，这是无效的。