Show selected option in bootstrap dropdown list menu

Question

I have dropdown list in my bootstrap menu.

<li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="caret"></span></a>   <ul class="dropdown-menu">     <li><a href="#">Option 1</a></li>     <li><a href="#">Option 2</a></li>     <li><a href="#">Option 3</a></li>     <li><a href="#">Option 4</a></li>   </ul> </li> 

I'm trying to get selected option in dropdown as title of dropdown instead of "chose option", as it is now. I have tried several solutions found on this and some other sites, but can't make any of them to work.

Can someone help with this?

Answer 1

This should work for you:

<div class="dropdown">     <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">       <span id="selected">Chose option</span><span class="caret"></span></a>   <ul class="dropdown-menu">     <li><a href="#">Option 1</a></li>     <li><a href="#">Option 2</a></li>     <li><a href="#">Option 3</a></li>     <li><a href="#">Option 4</a></li>   </ul> </div> 

And the script:

  $('.dropdown-menu a').click(function(){     $('#selected').text($(this).text());   }); 

You need to wrap the text 'Choose option' inside <span> to modify its value on selection.

Here is the working code: http://liveweave.com/U4BpiH