Question

我无法弄清楚如何在bootstrap中显示popover中的下拉列表。所有我能找到的教程只是显示文本和按钮。我需要显示下拉列表，还必须绑定数据。为了显示按钮及其事件，我遵循以下方式。

 var popOpts = {
        placement: 'left',
        title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
        html: 'true',
        trigger: 'click',
        content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
    }
    $(".btnDelete").popover(popOpts);

我需要知道如何在bootstrap中显示下拉列表和弹出窗口中的项目。

Answer 1

试试这个

您可以在表单内显示任何内容，并绑定事件

HTML

<div class="popover-markup"> <a href="#" class="trigger">Popover link</a> 
    <div class="head hide">Lorem Ipsum</div>
    <div class="content hide">
        <div class="form-group">
            <select><option>Test</option></select>
        </div>
        <button type="submit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>

脚本

$('.popover-markup>.trigger').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

DEMO

popover bootstrap中的下拉列表

1 个答案: