弹出窗口引导程序中的下拉菜单

Question

我无法弄清楚如何在引导程序的弹出窗口中显示下拉菜单。我能找到的所有教程都只显示文本和按钮。我需要显示下拉菜单，还必须在其中绑定数据。为了显示按钮及其事件，我遵循以下方式。

 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