I am struggling to get a button with dropdown working in Bootstrap4. Below is the HTML code:
<div class="row" id="dropdown-box">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn" id="button-group-id">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<div class="dropdown-menu">
{% for skill in skills %}
<a class="dropdown-item" href="#">{{skill.name}}</a>
{% endfor %}
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
Unfortunately, the JavaScript code just doesn't work as expected:
<script>
$( document ).ready(function() {
$("#button-group-id").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
console.log(x);
});
});
</script>