Получение значения из выбранного варианта раскрывающегося списка Bootstrap

Question

Я изучаю разработку, и я хочу, чтобы выпадало из бутстрапа с 3 вариантами изображения backgroun, а затем для передачи выбранного варианта изменил фон. На данный момент я не могу найти, как получить значение выбранного параметра. Я искал высоко и низко, чтобы узнать, как получить значение выбранного параметра, а затем использовать его, но я ничего не могу найти. Даже документация по бутстрапу нечеткая.

Пока выпадающий делает хорошо ...

<div class="dropdown open"> 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Background 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
      <a class="dropdown-item" href="#">Image 1</a> 
      <a class="dropdown-item" href="#">Image 2</a> 
      <a class="dropdown-item" href="#">Image 3</a> 
      </div> 
     </div> 

но потом застревают ...

$('#dropdownMenuButton').on('hidden.bs.dropdown', function() { 
    // get selected option and change background 
}) 

я могу изменить фон, но я просто не могу получить значение выбранный вариант.

Я не могу поверить, что это так сложно, поэтому я, очевидно, что-то пропустил. Пожалуйста, кто-нибудь может помочь?

Спасибо,

LB

Answer 1

Это вернет текстовое значение элемента щелкнули. Помните, что это не элемент select.

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

Answer 2

Вместо "hidden.bs.dropdown" событие вы можете прослушивать событие щелчка на "ниспадающего-элемент":

$('#dropdownMenuButton + [aria-labelledby="dropdownMenuButton"] a').on('click', function (e) { 
 
    e.preventDefault(); 
 
    // get selected option and change background 
 
    var ele = this; 
 
    console.log(ele.textContent); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="dropdown open"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Background 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Image 1</a> 
 
     <a class="dropdown-item" href="#">Image 2</a> 
 
     <a class="dropdown-item" href="#">Image 3</a> 
 
    </div> 
 
</div>