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。为了使其有效，您可以：

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

以下是代码：

$(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');
    });
});

我保存了您的小提琴here的修改版本。

Answer 2

您的代码正在运行，您需要检查是否禁用了页面中其他位置的选择字段：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="group_leaders_inputs"></div>

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

2 个答案: