1

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>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Ravi Rajindu
  • 380
  • 2
  • 6
  • 23

1 Answers1

0

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--

Manwal
  • 23,450
  • 12
  • 63
  • 93
  • in the demo it works but when I try it on my developing site it doesn't work can you give me what sould I include in the head section – Ravi Rajindu Jul 08 '15 at 05:06
  • Bootstrap Js required and jquery>=1.9 lib also required. – Manwal Jul 08 '15 at 05:09
  • thank you It worked after I put this jquery code within document ready function. $(document).ready(function(){ $('div.dropdown ul.dropdown-menu li a').click(function (e) { $('.selected').html($(this).html()); }) }); – Ravi Rajindu Jul 08 '15 at 05:21