如何克隆与动态填充选择一个jQuery选上的选择框?(How to clone a jQuery C

2019-10-18 06:54发布

我现在面临的问题,而克隆现有选定的元素(不是选项,但整个选择框),并为他们创造一个充满活力的ID。

我能然而克隆所选择的元素,它有作为父母的选择,并且不允许在里面选择一个选项产生相同的ID。

当我点击新生成的选上的箱子,这是克隆选择的家长表示选择的,而不是选择孩子的选项列表。 选择孩子由冷冻状态,我无法在它选择的选项。

截图:

JS:

$("#addCostDetailsRowBtn").button().click(addCostRowFn);

var addCostRowFn = function () {
var rowLen = $(".costTemplateRow").length;
//alert(rowLen);
var $newRow = $("#costTemplateRow1").clone(true);
$newRow.find('select').each(function () {
    //alert($(this));
    //alert($(this).attr('id'));
    var item = $(this).attr('id');
    if('undefined'!=item) {
        var newItem = item.replace(/^(.*)(\d+)$/, function(match, p1, p2) {
            return p1+(parseInt(p2)+1);
        });
        $(this).attr('id', newItem);
        $(this).removeClass("chzn-done");

    }
});

$('#costsTable tr:last').before($newRow);
return false;
};

一个人可以帮我把问题解决了吗?

谢谢你,再也克里希纳

Answer 1:

看来这个问题是克隆仍与原对象共享一些数据。 从jQuery文档http://api.jquery.com/clone/

通常情况下,势必对原有元素的任何事件处理程序不会被复制到克隆。 可选withDataAndEvents参数允许我们改变这种行为,并反而让以及所有的事件处理程序的副本,绑定到元素的新副本。 对于jQuery 1.4,所有元件数据(由。数据()方法连接)也被复制到新副本。

然而,要素数据中的对象和阵列不被复制,并且将继续被克隆的元件和原始的元素之间共享。 深拷贝所有的数据,手动复制每一个:

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

希望这可以帮助



Answer 2:

OK,然后,这里是我做的克隆与动态填充选项的选择控制。 也许有更好的方式,但没有jQuery的缓存更多信息/复制此至少工作。

var $parent = $('#myThingParentNode');
var clonePropDdl = $parent.find('.chosenProperty').clone();
//get selected value of chosen venue control
var clonePropDdlVal = $venue.find('.chosenProperty').val();
//find the element to add the new Chosen control
var $newCloneElem = $('#newPropCloneElement');
//add the new clone
$newCloneElem.append(clonePropDdl);
//initialize the clone
$newCloneElem.chosen({ width: "150px" });
//delete the cloned chosen detritis!! This is what makes this work
**$newCloneElem.find('.chosen-container:eq(1)').remove();**
//set the selected value of the new clone to value of the clone source
$newCloneElem.val(lastVenueVal).trigger('chosen:updated');


文章来源: How to clone a jQuery Chosen select box with dynamically populated options?