按钮中的下拉菜单值

Question

这是一个下拉菜单，我要在从列表中选择的值的基础上显示按钮中的值。.随附屏幕截图以供参考。 最好的方法是什么？

<button 
    type="button" 
    class="btn btn-fit-height grey-salt dropdown-toggle" 
    data-toggle="dropdown" 
    data-hover="dropdown" 
    data-delay="1000" 
    data-close-others="true">

        //Where Value 1 is written I want the li values..
        Value 1
        <i class="fa fa-angle-down"></i>
</button>

<ul class="dropdown-menu pull-right" style="margin-right:15px" role="menu">
    <li><a href="#">Value 1</a></li>
    <li><a href="#">Value 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Value 3</a></li>
    <li><a href="#">Value 4</a></li>
    <li><a href="#">Value 5</a></li>
    <li><a href="#">Value 6</a></li>
</ul>

Answer 1

你可以做

$(function() {
    var $button = $('button'); // maybe better give it an id or something

    $('.dropdown-menu.pull-right a').on('click', function(e) {
        e.preventDefault();

        $button.text($(this).text());
    });
});

但是您必须制作有效的HTML（必须关闭按钮）