Leonard Bassoon Leonard Bassoon - 10 days ago 6
CSS Question

Getting value from selected Bootstrap dropdown option

I'm learning development and what I want is a bootstrap dropdown with 3 backgroun image options and then to pass the selected option change the background. At the moment I can't find how to even get the value of the selected option. I've searched high and low to find how to get the value of the selected option and then use it but I can't find anything. Even the bootstrap documentation is vague.

So far the dropdown renders ok...

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


but then I get stuck...

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


I can change the background but I just can't get the value of the selected option.

I can't believe it is so difficult so I'm obviously missing something. Please can anyone help?

Thanks,

LB

bob bob
Answer

This will return the text value of the item clicked on. Beware that this is not a select element though.

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