ASP.NET Bootstrap下拉菜单-选择一个项目

Question

I have an ASP.net project which used Bootstrap controls. I have the following Bootstrap dropdown menu which pulls in the list items programmatically from a database.

However, when i click on the menu and select one of the items, i obviously need that item to show in the dropdown box. Instead, when an item is clicked, nothing happens apart from the dropdown menu is closed.

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

I'm assuming some kind of JavaScript is needed to set the dropdown menu to whichever item has been selected. But i'm not sure how to do it.

I've tried:

$("#myList li a").click(function () {
              alert('clicked');
              var selText = $(this).text();
              $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');

          });

also tried:

$('#myList li a').on('click', function () {
              $('#merchantList').val($(this).text());

          });

But these never seems to get called. Any ideas? It would be even better if I could do this in the code behind as I prefer to work back there.

Answer 1

Correct me if I am misunderstanding what you are looking to do but shouldn't you be able to find the item that they selected and set its css class="active". To figure out that the current item they selected matches the current page they are on there are several techniques using the URL.

Try doing something like the following on your master page:

var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');

Answer 2

I did it like this in the end and it seems to all be working. Simple enough i just couldn't figure it out as i'm a JS newbie!

<script>

      $().ready(function () {
         $('a').click(function () {
           var value = $(this).text();
           $('#merchantList').html(value + ' <span class="caret"></span>');
           alert(value);
          });
       });

</script>