2

我对 bootstrap add-on select picker有疑问。我是通过JS动态添加它们的，添加后它们不会被激活。它们就在那里，您可以单击它们，但不能选择该选项。这是简化的代码（或者这里是LIVE DEMO）。

<script>
$(function () {
    $("#add").click(function () {
        $(".pattern").clone().removeClass("hidden pattern").addClass("col-md-24 added").prependTo("#next-line");
    });

    $(".remove").click(function () {
        console.log("remove");
        $(this).parent('.added').remove();
    });
    $('.selectpicker').selectpicker();

    });
</script>
<!-- .... -->
<button type="button" id="add" class="btn btn-success"><span class="fa fa-plus"></span></button>
<form method="POST"> 
        <select class="selectpicker" name="id[]" data-live-search="true">
            <!-- .... -->
        </select>

    <div id="next-line">
    </div>
    <button type="submit" name="save" class="btn btn-lg btn-success"><span class="fa fa-lg fa-send"></span> Send</button>
</form>

<div class="pattern hidden">
    <select class="selectpicker"  name="id[]"  data-live-search="true">
        <!-- .... -->
    </select>
</div>

谢谢你的帮助。

4

1 回答 1

1

您正在克隆一个已经是selectpicker实例的元素。

由于您的隐藏选择只是一种要克隆的模式，因此我建议您selectpicker从中删除该类。

然后，您可以克隆。
但在添加之前，给它一个唯一的 id，这对于在其上启动 selectpicker 很有用。

$("#add").click(function() {
    var myClone = $(".pattern").clone().removeClass("hidden pattern").addClass("col-md-24 added");
    var nb = $(".added").length+1;

    myClone.attr("id", "added_"+nb).prependTo("#next-line");
    $("#next-line").find('#added_'+nb).find("select").selectpicker(); //load again
});

这样，您肯定会仅在新添加的元素上启动选择器。
;)

它在这个CodePen中工作。

于 2016-11-26T01:49:03.067 回答