我有动态文本框,可以在单击按钮时添加。
但是,我想复制每个动态复制的动态文本框上的下拉值以用于其他目的。
但是,它仅复制第一个文本框上下拉列表的值,而不是复制所有相应的文本框。请帮忙。
我的代码:
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>
最佳答案
您需要使用 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>
关于javascript - 复制动态文本框上的下拉值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61536167/