javascript - 在动态文本框上复制下拉值
问题描述
我有在单击按钮时添加的动态文本框。
但是,我想复制每个动态复制的动态文本框上的下拉值以用于其他目的。
但是,它只复制第一个文本框的下拉值,而不是复制所有相应的文本框。请帮忙。
我的代码:
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>
推荐阅读
- azure - 有什么方法可以确保任何 azure 服务计划在一个 azure 订阅中具有唯一的静态出站 IP 地址?
- sql-server - EF Core 在大循环中存在 ABP 性能问题
- intellij-idea - Intellij IDEA 中的新 HTTP 客户端如何自动解析响应
- java - 如何从 Java 中的文本文件中读取格式化数据
- c++ - 计算出有多少客户端可以连接到我正在使用的一些 tcp 服务器代码
- mysql - 加入价值 MySQL
- python - 可以或如何在 Google Cloud Functions 上使用 Python asyncio?
- sql - Laravel Eloquent ->take(5) 如果结果较少,则不起作用
- php - 用 fancybox 显示帖子内容
- ios - 如何从我的应用程序中打开亚马逊应用程序?