使用javascript动态创建具有不同ID的多个下拉列表

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>

jquery 会为此做什么？

我有一个表，其中有一个 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");
    });
});