时间戳

首页 > 解决方案 > 使用javascript在多行表中显示下拉项的值

javascript - 使用javascript在多行表中显示下拉项的值

问题描述

我有一个包含 2 列的表。第一个有一个下拉列表，需要选择它才能在第二列中显示其值。问题是只有表的第一行正在更新。选择第二个下拉列表时，第一行正在更新。我不是 javascript 开发人员，我正在寻找如何解决这个问题。

以下是部分代码：

function updateinput(e) {
    var selectedOption = e.options[e.selectedIndex];
     document.getElementById('viewvalue').value = selectedOption.getAttribute('data-name');  
    }
<tr>
  <td>
  <select onchange="updateinput(this)">
  <option data-name="">Select</option>
   <option data-name="value 1">test 1</option>
   <option data-name="value 2">test 2</option>
  </select>
  <td><input type="text" id="viewvalue" name="viewvalue"></td>
 <br>
 <td>
  <select onchange="updateinput(this)">
  <option data-name="">Select</option>
  <option data-name="value 1">test 1</option>
   <option data-name="value 2">test 2</option>
  </select>
  <td><input type="text" id="viewvalue" name="viewvalue"></td>
</tr>

标签： javascripthtml-tabledropdown

解决方案

您必须保留对选择字段的引用。由于您已经使用了数据属性，因此我在示例中做了同样的事情。

附件data-select-index允许您引用id相应输入字段的。例如 select-tagdata-select-index="num1"引用 input-tagid="view-num1"等等

function updateinput(e) {
  var selectedOption = e.options[e.selectedIndex];
  document.getElementById('view-' + e.getAttribute('data-select-index')).value = selectedOption.getAttribute('data-name');
}
<tr>
  <td>
    <select data-select-index="num1" onchange="updateinput(this)">
      <option data-name="">Select</option>
      <option data-name="value 1">test 1</option>
      <option data-name="value 2">test 2</option>
    </select>
    <td><input type="text" id="view-num1" name="viewvalue"></td>
    <br>
    <td>
      <select data-select-index="num2" onchange="updateinput(this)">
        <option data-name="">Select</option>
        <option data-name="value 1">test 1</option>
        <option data-name="value 2">test 2</option>
      </select>
      <td><input type="text" id="view-num2" name="viewvalue"></td>
</tr>

推荐阅读