Question

<div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" 
                  data-toggle="dropdown" aria-haspopup="true" aria- 
                         expanded="false">
                    Trier <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Par Nom</a></li>
                    <li><a href="#">Par Categorie</a></li>
                    <li><a href="#">Par prix</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Par Défaut</a></li>
                </ul>
            </div>


  <script type="text/javascript">

    $(function() {
        $(".dropdown-menu li a").click(function() {
            var show = $('.dropdown-menu li a ').text();
           alert(show);
        });

    });
</script>

我想在警报中显示我从列表中选择的内容。例如，如果我点击“Par Categorie”，它会显示警报“Par Catergorie”或与此相关的任何内容。请帮我！

Answer 1

更改var show = $('.dropdown-menu li a ').text();

要

var show = $(this).text();。这将从下拉列表中为您提供当前选定的项目。

$(function() {
  $(".dropdown-menu li a").click(function() {
    var show = $(this).text();
    alert(show);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" 
    data-toggle="dropdown" aria-haspopup="true" aria- 
           expanded="false">
      Trier <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
      <li><a href="#">Par Nom</a></li>
      <li><a href="#">Par Categorie</a></li>
      <li><a href="#">Par prix</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Par Défaut</a></li>
  </ul>
</div>

Answer 2

您的代码没问题，唯一的问题是在事件功能中您选择了所有元素，并且您只需要选择单击的元素，就像这样

$(".dropdown-menu li a").click(function(e) {
   var show = $(e.target).text();
   alert(show);
});

请注意，我添加了一个参数＆＃34; e＆＃34;对于事件功能，即事件，然后我将其目标并用作选择器。

Javascript List组下拉菜单Bootstrap

2 个答案: