如何在引导程序下拉列表的标题中显示所选项目？ 以及如何在JavaScript警报框中显示所选项目？

Question

I have tried lots of examples given in this type of questions but still can't find how to display selected item on the title of the bootstrap dropdown list and how to get the selected item through javascript. if someone know the code please help me with the links that I should include in the head section. Because I think it may be I missing something in the head section. here is sample dropdown list.

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   Option: <span class="selection">Option 1</span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
   </ul>
</div>

Answer 1

I am modified HTML little bit, and added jquery event:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown:  <span class="selected"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Jquery:

$('div.dropdown ul.dropdown-menu li a').click(function (e) {
    $('.selected').html($(this).html());
})

--DEMO--