显示多行 table 和 javascript 中下拉项的值

Question

我有一个包含 2 列的 table。第一个有一个下拉列表，需要选择它才能在第二列中显示其值。问题是只有 table 的第一行被更新。选择第二个下拉列表时，第一行正在更新。我不是 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>

Answer 1

您必须保留对 select 字段的引用。由于您已经使用了 data-attribute，我在示例中也做了同样的事情。

附件data-select-index可以让你参考对应input-field的id。例如。 select-tag data-select-index="num1" 引用 input-tag id="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>

显示多行 table 和 javascript 中下拉项的值

Showing value of dropdown item in multi-row table with javascript

javascript

html-table

dropdown