Скопируйте выпадающие значения в текстовое поле Dynami c

Question

У меня есть динамические c текстовые поля, которые добавляются при нажатии кнопки.

Однако я хотел скопировать раскрывающиеся значения в каждом текстовом поле Dynami c Copyi c для некоторых других целей.

Но он копирует только значение раскрывающегося списка в первом текстовом поле и копирует не во все соответствующие текстовые поля. Пожалуйста, помогите.

Мой код:

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var but = document.getElementById("submit_form");

  row.insertCell(0).innerHTML = test_type.value;
  row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question" size="20"/>';
  row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
  row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" id="test_type_val"/>';

}

function copyValue() {
  var dropboxvalue = document.getElementById('test_type').value;
  document.getElementById('test_type_val').value = dropboxvalue;
}

function deleteRow(obj) {

  var index = obj.parentNode.parentNode.rowIndex;
  var table = document.getElementById("bod");
  table.deleteRow(index);
}

<select id="test_type" name="test_type" />
<option value=""></option>
<option value="EASY"> EASY </option>
<option value="MEDIUM"> MEDIUM </option>
<option value="DIFFICULT"> DIFFICULT </option>
</select>
<input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow(); copyValue()">
</div>

<br>
<table id="bod">
  <tr>
    <th>TEST TYPE</th>
    <th>QUESTION</th>
    <th>DELETE BUTTON</th>
    <th>COPIED VALUE FROM DROPDOWN</th>
  </tr>
</table>

Answer 1

Вам нужно изменить с помощью идентификатора на класс test_type_val

row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" class="test_type_val"/>';

Создать index =0 для получения правильной строки класса.

В функции копирования изменить на

document.getElementsByClassName('test_type_val')[index++].value = dropboxvalue;

var index = 0;
function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var but = document.getElementById("submit_form");

  row.insertCell(0).innerHTML = test_type.value;
  row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question" size="20"/>';
  row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
  row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" class="test_type_val"/>';

}

function copyValue() {
  var dropboxvalue = document.getElementById('test_type').value;
  document.getElementsByClassName('test_type_val')[index++].value = dropboxvalue;
}

function deleteRow(obj) {

  var index = obj.parentNode.parentNode.rowIndex;
  var table = document.getElementById("bod");
  table.deleteRow(index);
}

<select id="test_type" name="test_type" />
<option value=""></option>
<option value="EASY"> EASY </option>
<option value="MEDIUM"> MEDIUM </option>
<option value="DIFFICULT"> DIFFICULT </option>
</select>
<input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow(); copyValue()">
</div>

<br>
<table id="bod">
  <tr>
    <th>TEST TYPE</th>
    <th>QUESTION</th>
    <th>DELETE BUTTON</th>
    <th>COPIED VALUE FROM DROPDOWN</th>
  </tr>
</table>

Answer 2

Другое возможное решение состоит в том, чтобы каждый вход имел уникальный идентификатор, такой как rowId:

<input type="text" name="test_type_val_${rowId}" id="test_type_val_${rowId}"/>

Затем вы можете добавить прослушиватель щелчка для кнопки, который увеличивает считать каждый раз, когда он нажал. Не забывайте уменьшать его при каждом удалении строки:

let button = document.getElementById("add");
button.addEventListener("click", (e) => {
  addRow();
  copyValue();
  rowId++;
});

let rowId = 0;
let button = document.getElementById("add");
button.addEventListener("click", (e) => {
  addRow();
  copyValue();
  rowId++;
});

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var but = document.getElementById("submit_form");

  row.insertCell(0).innerHTML = test_type.value;
  row.insertCell(1).innerHTML =
    '<input type="text" name="question[]" id="question" size="20"/>';
  row.insertCell(2).innerHTML =
    '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
  row.insertCell(
    3
  ).innerHTML = `<input type="text" name="test_type_val[]" id="test_type_val_${rowId}"/>`;
}

function copyValue() {
  var dropboxvalue = document.getElementById("test_type").value;
  document.getElementById(`test_type_val_${rowId}`).value = dropboxvalue;
}

function deleteRow(obj) {
  var index = obj.parentNode.parentNode.rowIndex;
  var table = document.getElementById("bod");
  table.deleteRow(index);
}

<select id="test_type" name="test_type">
  <option value=""></option>
  <option value="EASY">EASY</option>
  <option value="MEDIUM">MEDIUM</option>
  <option value="DIFFICULT">DIFFICULT</option>
</select>
<input type="button" id="add" name="add" value="Add" />

<br />
<table id="bod">
  <tr>
    <th>TEST TYPE</th>
    <th>QUESTION</th>
    <th>DELETE BUTTON</th>
    <th>COPIED VALUE FROM DROPDOWN</th>
  </tr>
</table>

Answer 3

        function addRow() {
          var table = document.getElementById("bod");
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
          var but = document.getElementById("submit_form");
         
          row.insertCell(0).innerHTML = test_type.value;
          row.insertCell(1).innerHTML = '<input type="text" name="question[]" id="question'+rowCount+'" size="20"/>';
          row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
          row.insertCell(3).innerHTML = '<input type="text" name="test_type_val[]" id="test_type_val'+rowCount+'"/>';

      
          var dropboxvalue = document.getElementById('test_type').value;
          document.getElementById('test_type_val'+rowCount).value = dropboxvalue;
        }

        function deleteRow(obj) {

          var index = obj.parentNode.parentNode.rowIndex;
          var table = document.getElementById("bod");
          table.deleteRow(index);
        }

        <select id="test_type" name="test_type" />
        <option value=""></option>
        <option value="EASY"> EASY </option>
        <option value="MEDIUM"> MEDIUM </option>
        <option value="DIFFICULT"> DIFFICULT </option>
        </select>
        <input type="button" id="add" name="add" value="Add" onclick="Javascript:addRow();">
        </div>

        <br>
        <table id="bod">
          <tr>
            <th>TEST TYPE</th>
            <th>QUESTION</th>
            <th>DELETE BUTTON</th>
            <th>COPIED VALUE FROM DROPDOWN</th>
          </tr>
        </table>