Bootstrap下拉菜单选择的项目未加载

时间:2015-05-12 06:35:43

标签: twitter-bootstrap

链接bootstrap.min.css,bootstrap-theme.min.css,jquery.min.js“,bootstrap.js,dropdown.js

http://jsfiddle.net/id10922606/54edxsmv/1/

<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-   toggle="dropdown"  aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>

为什么选择的项目没有加载而不是'Action'列表值。只有工作下拉菜单?请帮忙

1 个答案:

答案 0 :(得分:0)

您需要确保您的小提琴包含外部资源的链接/引用。

当您说“为什么选择的项目没有加载而不是'行动'列表值”时,您是否意味着它没有使用您点击的项目更新下拉列表?如果是这样,您想要添加以下内容:

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();

    $('.dropdown-menu li a').click(function() {
        $('.btn:first-child').text($(this).text());
        $('.btn:first-child').val($(this).text());
    });
});

http://jsfiddle.net/54edxsmv/4/

这样做,就是当您点击li a列表中的.dropdown-menu标记时,它会使用点击的项目文本更新第一个按钮.btn:first-child的文本和值。

有多种方法可以处理多个下拉菜单,例如:

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();

    $.each($('.btn-group'), function() {

        var $dropdown = $(this);

        $dropdown.find('.dropdown-menu li a').click(function() {
            $dropdown.find('.btn:first-child').text($(this).text());
            $dropdown.find('.btn:first-child').val($(this).text());
        });
    });

});

http://jsfiddle.net/54edxsmv/5/