彈出式引導程序中的下拉菜單

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

我需要知道如何顯示下拉列表以及如何在引導程序中綁定彈出窗口中的項目。

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();
    }
});

演示