javascript - 复制动态文本框上的下拉值

Question

我有动态文本框，可以在单击按钮时添加。

但是，我想复制每个动态复制的动态文本框上的下拉值以用于其他目的。

但是，它仅复制第一个文本框上下拉列表的值，而不是复制所有相应的文本框。请帮忙。

我的代码:

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

您需要使用 id 更改为类 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>