I am currently working on an ASP.net project that incorporates Bootstrap controls. The issue I am facing involves a Bootstrap dropdown menu that dynamically populates its list items from a database.
The problem arises when I click on the menu and select an item. Instead of displaying the selected item in the dropdown box, the menu simply closes without any changes.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="merchantList" data-toggle="dropdown" aria-expanded="false"> Choose Merchant <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="merchantList" id="myList" runat="server">
<asp:Literal runat="server" id="merchantDropDown"></asp:Literal>
</ul>
</div>
It appears that some JavaScript implementation is necessary to update the dropdown menu based on the user's selection. However, I am unsure of how to properly execute this.
I have attempted:
$("#myList li a").click(function () {
alert('clicked');
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
and also tried:
$('#myList li a').on('click', function () {
$('#merchantList').val($(this).text());
});
Unfortunately, these solutions do not seem to be triggering. Any suggestions or insights would be greatly appreciated. Ideally, I would prefer to handle this functionality in the code behind for a more structured approach.