Как получить значение выбранного выпадающего элемента bootstrap, используя jquery?

Question

У меня есть следующий bootstrap выпадающий список.

Я пытаюсь получить в console.log значение выбранного выпадающего элемента с помощью jquery. Я могу 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/ использовать атрибут данных в качестве решения. Я положил в скрипку

$('.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>

Answer 2

Похоже, мне пришлось использовать метод .attr, как показано ниже. Спасибо @KevynKlava за ответ

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