Question

我想在popover中插入一个多选（来自multiselect bootstrap plugin）（来自popover bootstrap plugin）。

不幸的是，多选未正确初始化，结果是经典的bootstrap多选框：

The multiselect is a bootstrap multiselect and not a multiselect-bootstrap plugin multiselect

这是我的代码：

<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>

Answer 1

我发现了这种方式：

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

使用该事件＆＃34; show.bs.popover＆＃34;可能更好。

如何在弹出窗口中放置多个选项？

1 个答案: