使用 jquery 创建并复制一个 select 框

Question

我们想制作一个新的 select 框，并在事件发生时从另一个 select 框复制其选项。我们使用以下代码：

//Create a new select box and add it to a div
$('#content').append("<select id='destination'/>");
//Create copy source options
var $options = $("#source > option").clone();
//Append source option to destination
$("#destination").append($options);

http://jsfiddle.net/e8ctkkvL/1/

我有一个包含很多 select 的页面（每个都有很多选项），上面的代码很慢！有什么方法可以使 JS 更快？！

Answer 1

您应该设置一个 class 而不是 ID，然后将其附加到最后创建的 select，例如：

$(document).ready(function () {
    $("#btn").click(function () {
        //Create a new select box
        $('#content').append("<select class='destination'/>");
        //Create copy source options
        var $options = $("#source > option").clone();
        //Append source option to destination
        $(".destination").last().append($options);
    });
});

Fiddle: http://jsfiddle.net/e8ctkkvL/3/

Answer 2

我宁愿复制源代码并设置动态 ID，因为您可能想要多个 select 框和不同的 ID，如下所示：

演示@Fiddle

$(document).ready(function () {
    var id = 1;
    $("#btn").click(function () {
        //Create a new select box
        $('#content').append($("#source").clone(true).attr({id: "destination" + id}));
        id++;
    });
});

使用 jquery 创建并复制一个 select 框

Create and Copy a select box with jquery

javascript

jquery

select

clone