Wert von ausgewählten Bootstrap Dropdown-Option

Question

Ich bin Entwicklung und was ich will ist ein Bootstrap Dropdown mit 3 Hintergrundbild-Optionen und dann übergeben Sie die ausgewählte Option ändern Sie den Hintergrund. Im Moment kann ich nicht herausfinden, wie man den Wert der gewählten Option überhaupt erhält. Ich habe hoch und niedrig gesucht, um zu finden, wie man den Wert der ausgewählten Option erhält und dann verwendet, aber ich kann nichts finden. Sogar die Bootstrap-Dokumentation ist vage.

Bisher ist die Drop-Down-ok macht ...

<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> 

aber dann stecken ich ...

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

Ich kann den Hintergrund ändern, aber ich kann einfach nicht den Wert erhalten die ausgewählte Option.

Ich kann nicht glauben, dass es so schwierig ist, so dass ich offensichtlich etwas vermisse. Bitte kann jemand helfen?

Danke,

LB

Answer 1

Dies wird der Textwert des Elements zurückkehren geklickt. Beachten Sie, dass dies kein select Element ist.

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

Answer 2

Statt des "hidden.bs.dropdown" Ereignis, das Sie auf dem "Drop-Down-Position" für das Click-Ereignis hören können:

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