Отображение значения раскрывающегося списка в многострочной таблице с javascript - PullRequest
Новая
       42

Отображение значения раскрывающегося списка в многострочной таблице с javascript

0 голосов
/ 05 августа 2020

У меня есть таблица, содержащая 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>

1 Ответ

0 голосов
/ 05 августа 2020

Вы должны сохранить ссылку на поле выбора. Поскольку вы уже использовали атрибут данных, я сделал то же самое в примере.

Прикрепленный data-select-index позволяет вам ссылаться на 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>
...