Question

我有一个带有一些id名称的选择下拉列表。我想用javascript动态地用不同的Id名称来克隆它。这是我的代码。

<td>
            <div style="float: left;">
                <g:select name="degree.id" from="${DomainName.list()}" optionKey="id"
                          optionValue="title" noSelection="['': '']" id="degree"
                          value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)"/>
            </div>

        </td>
<a href="javascript:void (0);" onclick="addAnotherSelectBox();">Add Another Select Box </a>

这会是什么问题？

我有一张表，里面有tr和td。在那个td中有一个选择框。我需要复制选择框并将其放入新行。用户可以根据需要生成许多选择框。所以我希望生成一个动态tr，并在其中创建具有新Id的选择框的克隆。

Answer 1

如果你正在使用jQuery，你可以说：

var newSelect = $("#degree").clone().prop("id", "newIdHere");

然后您可以将其添加到您的页面：

newSelect.appendTo("selector of parent element here");
// OR
$("selector of parent").append(newSelect);
// e.g., to add to same div as original:
$("#degree").parent().append(newSelect);

最好不要包含像onclick=...这样的内联事件属性，特别是如果你已经在使用jQuery：

<a href="#" id="addSelect">Add Another Select Box </a>

然后：

$(document).ready(function() {
    $("#addSelect").click(function(e) {
        e.preventDefault();
        var newSelect = $("#degree").clone().prop("id", "newIdHere");
        newSelect.wrap("<tr><td></td></tr>").closest("tr").appendTo("#idOfTableHere");
    });
});

使用javascript以不同的id动态创建多个下拉列表

1 个答案: