2

我想在弹出框（来自弹出框引导插件）中插入一个多选（来自多选引导插件）。

不幸的是，多选没有正确初始化，结果是一个经典的引导多选框：

多选是引导多选而不是多选引导插件多选

这是我的代码：

<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-multiselect.css">
</head>

<body>

<button id="mypopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content='
        <div class="btn-group">
            <select class="form-control multiselect" multiple="multiple">
                <option>Choice 1</option>
                <option>Choice 2</option>
                <option>Choice 3</option>
            </select>
            <button class="btn btn-default" type="button">&nbsp;<span class="glyphicon glyphicon-remove"></span>&nbsp;</button>
            <button class="btn btn-primary" type="button">&nbsp;<span class="glyphicon glyphicon-ok"></span>&nbsp;</button>
        </div>
    ' data-title="Filter">
    My popover
</button>


<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script>  
    $(function() {
        // Popover
        $("#mypopover").popover({
            trigger:'click', 
            html:true, 
            content:function(){return $("#popover-content").html();}}
        );
        $('.multiselect').multiselect();
    }); 
</script>

</body>
</html>
4

1 回答 1

2

我发现了这种方式：

<script>  
    $(function() {
        $("#mypopover").popover({
            trigger:'click', 
            html:true, 
            content:function(){return $("#popover-content").html();}}
        ).on('click',function () {
            $('.multiselect').multiselect();
        });  
    }); 
</script>

使用事件“show.bs.popover”可能会更好。

于 2014-03-14T16:09:30.283 回答