按钮中的下拉菜单值

Question

This is a drop-down menu I want to display the values in the button on the base of value selected from the list.. Screenshot is attached for reference. What is the best approach to do this?

<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

You could do

$(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());
    });
});

But you have to make a valid HTML (button has to be closed)