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.