如何使用Javascript添加具有相同值的选择框 - How to add a select box with the same values using Javascript

How to add a select box with the same values using Javascript

本文关键字：选择何使用 Javascript 添加 | 更新日期: 2023-09-27

我有代码添加一些选择框，但我不能添加相同的选择框值。这是我的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);

类似这样的操作将循环浏览第一个选择中的选项，并将它们添加到第二个（新）选择中。