How to Display Selected Item in Bootstrap Button Dropdown Title

Hey guys i need some help regarding bootstrap dropdown menu

How to Display Selected Item in Bootstrap Button Dropdown Title

<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="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action <img src="img/lorem.png" alt="lorem"></a></li>
    <li><a href="#">Another action <img src="img/lorem.png" alt="lorem"></a></li>
    <li><a href="#">Something else here <img src="img/lorem.png" alt="lorem"></a></li>
    <li><a href="#">Separated link <img src="img/lorem.png" alt="lorem"></a></li>
  </ul>
</div>

when someone clicks on the dropdown menu, the word dropdown should be replaced by

Action <img src="img/lorem.png" alt="lorem">

which is the content of first a element

	 $(".dropdown-menu li a").click(function(){
		 
		
		 
  $(this).parents(".dropdown").find('.btn').html('<img src="img/lorem.png" alt="lorem">' + $(this).text() + ' <span class="caret"></span>' );
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
	
});

This is the jquery i am using, everything works except the image dosent change based on each a.

Can you guy help with this. Thanks.

This appears to be a jQuery question, so I have moved it into the JavaScript category.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.