Question

我的表格中有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>

Answer 1

您可以使用“onchange”调用常用函数并更新其中的值。而且由于您使用innerHTML设置了一个值，它将替换之前的值。 user + =运算符将值附加到现有值。

<强> 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的多个元素，因此我们会获得带有标签名称标签的元素，并检查其ID以选择我们想要的标签。

function changeVal(value)
{
    var rows = document.getElementsByTagName('label');
    for(var i in rows)
    {
        if(rows[i].id == 'mylabel')
            rows[i].innerHTML += value;
    }
}

JS小提琴： http://jsfiddle.net/xensoft/fK5m3/3/

使用javascript从2或3下拉列表中将所选值显示到文本框中

1 个答案: