javascript - Bootstrap4 dropdown with button - 获取选中的元素

Question

我在 Bootstrap4 中有一个带有下拉菜单的按钮。 HTML 如下所示:

<div class="row" id="dropdown-box">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn" id="button-group-id">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Select
        </button>
        <div class="dropdown-menu">
          {% for skill in skills %}
            <a class="dropdown-item" href="#">{{skill.name}}</a>
          {% endfor %}
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </div>

这是 Javascript，没有效果 :(

<script>
  $( document ).ready(function() {
      $("#button-group-id").on("show.bs.dropdown", function(event){
          var x = $(event.relatedTarget).text(); // Get the text of the element
          console.log(x);
      });

  });
</script>

Answer 1

试试这个 js

$( document ).ready(function() {
     $(".dropdown-menu a").click(function(){
     var selText = $(this).text();
     console.log(selText);
    });
});

fiddle :https://jsfiddle.net/5rpwvzsw/