javascript - 如何使用 jquery 获取所选引导下拉项的值？

Question

我有以下引导下拉菜单。

我尝试使用 jquery 进入 console.log 所选下拉项的值。我可以使用下面的代码 console.log 文本，但由于某种原因，当我将 .text() 更改为 .val() 时，我没有得到该值/

$('.dropdown-item').click(function() {
  console.log( $(this).text() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='/' method='get'>
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Date
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  
                  <a class="dropdown-item" href="#" value="1">March 16 to 19 - CANCELLED</a>
                  
                  <a class="dropdown-item" href="#" value="2">March 21 and 22 - REVISED</a>
                  
                  <a class="dropdown-item" href="#" value="3">March 23 to 26 - REVISED</a>
                  
                  <a class="dropdown-item" href="#" value="4">March 28 and 29</a>
                  
                  <a class="dropdown-item" href="#" value="5">March 30 to April 2 - REVISED</a>
                  
                </div>
             </div>
            </form>

Answer 1

https://jsfiddle.net/vkLr7zhe/使用数据属性作为解决方案。我放入 fiddle

$('.dropdown-item').click(function() {
  console.log( $(this).data("id") );
});






<a class="dropdown-item"data-id="1" href="#" value="1">March 16 to 19 - CANCELLED</a>