按钮中的下拉菜单值

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（按钮必须关闭）