简体   繁体   English

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

[英]Dropdown in popover bootstrap

I am not able to figure out how to display dropdown in popover in bootstrap. 我不知道如何在引导程序的弹出窗口中显示下拉列表。 All i can find tutorials are just displaying just text and buttons. 我所能找到的所有教程仅显示文本和按钮。 I need to display dropdown and also have to bind data in it. 我需要显示下拉菜单,还必须在其中绑定数据。 To display buttons and for its events i have followed the below way. 为了显示按钮及其事件,我按照以下方式进行。

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

I need to know how to display dropdown and to bind items in popover in bootstrap. 我需要知道如何显示下拉列表以及如何在引导程序中绑定弹出窗口中的项目。

Try like this 这样尝试

You can display anything inside form,and bind the events 您可以在表单中显示任何内容并绑定事件

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

Script 脚本

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

DEMO 演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM