克隆选择字段后无法更改选择

Question

我有一个选择字段

<div class="col-xs-10 selectContainer" id="jc_leader_input_field" style="display: inline;">
    <select class="form-control selectpicker" style="margin:0px;padding:0px" value="" data-size="15">
        <option selected="selected" value="0">Option1</option>
        <option value="1">Option0</option>
    </select>
</div>

现在我想克隆这个对象并将其包含在我的表单中

var div = document.createElement("div");
var selectfield = $('#jc_leader_input_field').clone();
selectfield.attr('id','test');
selectfield.appendTo(div); 
$('#group_leaders_inputs').append(div);

其中#group_leaders_inputs指的是形式。克隆和插入工作正常，但我无法更改复制的选择字段中的任何选项。

我做了一个小提琴来说明问题......在制作它的同时，我注意到没有 bootstrap-select 它实际上工作得很好 http://jsbin.com/vonoqazawa/edit?html,output

Answer 1

问题来自 Bootstrap selectpicker。为了使其发挥作用，您可以：

1. 从原始选择控件中删除选择器
2. 克隆原始元素并将其添加到 DOM
3. 重新激活两个选择控件的选择器

这是代码：

$(document).ready(function () {
    $(".btn-add").click(function (evt) {
        var $originalDiv = $('#jc_leader_input_field');
        var $originalSelect = $originalDiv.find('.selectpicker');
        $originalSelect.selectpicker('destroy').addClass('tmpSelect');
        var div = document.createElement("div");
        div.className = 'col-xs-12';
        div.style = 'margin:0px;padding:0px';
        var selectfield = $originalDiv.clone();
        selectfield.attr('id', 'test');
        selectfield.appendTo(div);
        $('#group_leaders_inputs').append(div);
        $('.tmpSelect').selectpicker().removeClass('tmpSelect');
    });
});

我在这里保存了你的小提琴的修改版本。