Bootstrap下拉菜单无法选择元素。需要具有按钮组设计的下拉菜单。

Question

Bootstrap下拉菜单无法选择元素。需要具有按钮组设计的下拉菜单。

3

我正在使用Twitter Bootstrap，并寻找一个下拉菜单，它看起来像一个按钮组。问题是在所有的Twitter Bootstrap示例中，下拉菜单只作为菜单项，因此所选项目实际上并没有改变：
http://twitter.github.com/bootstrap/javascript.html#dropdowns 有人有什么想法吗？如何设计类似按钮组的下拉菜单？

- Naor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Naor · Accepted Answer

我把这个网页发现转换成了一个jQuery插件：

(function($) {
    $.fn.buttonSelect = function() {
        this.hide().wrap('<div class="btn-group"/>');
        var select = this.parent();
        var selectedOption=this.find('option[selected]').length>0?this.find('option[selected]'):this.find('option:nth(0)');
        var currentValue = selectedOption.val();
        var currentText = selectedOption.text();
        select.html(
            '<input type="hidden" value="' + this.val() + '"/>'+
            '<a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;">'+
                '<span>'+currentText+'</span>'+
                '&nbsp;&nbsp;<span class="caret"></span>'+
            '</a>'+
            '<ul class="dropdown-menu"></ul>');

        var dropdownMenu=select.find('.dropdown-menu');
        this.find('option').each(function(o, q) {
            dropdownMenu.
                append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
        });

        var hidden=select.find('input[type=hidden]');
        var label=select.find('.btn span:nth(0)');
        dropdownMenu.find('a').click(function() {
            hidden.val($(this).data('value')).change();
            label.text($(this).text());
        });

        return this;
    };
})(jQuery);

然后，使用 $(elem).buttonSelect(); 可以使选择元素看起来像按钮组。