如何使用Javascript添加具有相同值的选择框
How to add a select box with the same values using Javascript
我有代码添加一些选择框,但我不能添加相同的选择框值。这是我的HTML代码
<input onClick="addRow('dataTable')" type="button" value="Add" class="btn btn-primary">
<input onClick="deleteRow('dataTable')" type="button" value="Delete" class="btn btn-danger">
<div style="padding: 20px 0px 0px 0px;">
<table id="dataTable" border="0">
<tbody>
<tr>
<td width="40px"></td>
<td align="center">Number</td>
</tr>
<tr>
<td><input name="chk" type="checkbox"></td>
<td>
<select id='kap' name='kap'>
<option value=''>-- number --</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
</select>
</td>
</tr>
</tbody>
</table>
在这种情况下,我想添加一些等于selectbox id='kap'的值。这是我的javascript代码
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element3 = document.createElement("select");
var element3 = document.getElementById("kap");
element3.type = "select";
element3.name = "selectbox[]"
cell2.appendChild(element3);
}
试试这个:
var element3 = document.getElementById("kap").cloneNode(true);
点击此处查看:jsFiddle
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element3 = document.createElement("select");
var elementCopy = document.getElementById("kap");
element3.type = "select";
element3.name = "selectbox[]";
for(var i = 0; i < elementCopy.options.length; i++)
{
var option = document.createElement("option");
option.innerHTML = elementCopy.options[i].innerHTML;
element3.appendChild(elementCopy);
}
cell2.appendChild(element3);
类似这样的操作将循环浏览第一个选择中的选项,并将它们添加到第二个(新)选择中。
相关文章:
- 选择时使用jQuery克隆HTML DIV
- HTML使用选择表单更改输入选择(可能使用JQuery?)
- 默认按表列选择选项(使用Javascript)
- Accordion选择在使用jquery点击其中一个时无法正常工作
- 试图创建一个具有2“;数量;选择器使用html、javascript
- 允许日期选择器使用文本输入字段
- 日期选择器使用所有字段的下拉菜单JavaScript和JQuery W/O日历
- 在链接选择上使用jQuery添加/删除类
- 选择除使用 JavaScript 的文本框之外的所有文本框
- 在 HTML 中选择中使用 Vue.js 和 Minimalect 显示默认值
- 高如何选择要使用 javascript 显示的范围?.
- 有选择地使用 MathJax 渲染方程
- 如何使用类选择器使用 Jquery ScrollTo() 将页面滚动到元素
- 如何获取 HTML 选择以使用 JavaScript 显示所选值
- 反应构建选择输入使用 for 循环
- Angularjs 2:在离子选择离子 2 中选择不使用选定值更新
- AngularJs:选择在使用ng-repeat时不显示任何选项的下拉列表
- jQuery选择器使用正则表达式(或其他东西)
- 为什么日期选择器使用 Jquery 日期选择器仅显示 20 年的选项
- 选择“JS使用数组作为源”