Question

我有一个使用Bootstrap控件的ASP.net项目。我有以下Bootstrap下拉菜单，它以编程方式从数据库中提取列表项。

然而，当我点击菜单并选择其中一个项目时，我显然需要在下拉框中显示该项目。相反，当单击某个项目时，除了下拉菜单之外没有任何其他事情发生。

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

我假设需要某种JavaScript才能将下拉菜单设置为选择的项目。但我不知道该怎么做。

我试过了：

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

          });

也尝试过：

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

          });

但这些似乎永远不会被称为。有任何想法吗？如果我能在后面的代码中执行此操作会更好，因为我更愿意在那里工作。

Answer 1

如果我误解了你想要做的事情，请纠正我，但是你不应该找到他们选择的项目并设置它的css class =“active”。要弄清楚他们选择的当前项目与他们所在的当前页面匹配，有几种使用URL的技术。

尝试在母版页上执行以下操作：

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

Answer 2

我最终这样做了，似乎一切正常。很简单，我只是想不起来，因为我是一个JS新手！

<script>

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

</script>

Asp.net bootstrap下拉菜单 - 选择一个项目

2 个答案: