Develop Reference

Get Value of a BootStrap dropdown onChange in JavaScript

I want to call my JavaScript function based on the dropdown value selected. This is what I have, but when I click on age or the other value, nothing changes. Am i missing something?
<div class="container d-flex justify-content-center">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle mr-2" type="button" id="data" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Search Data
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Age</a>
<a class="dropdown-item" href="#">Gender</a>
</div>
</div>
```
JS:
const data = document.getElementById("data").value;
data.addEventListener("change", (event) =>
usersFetch(`http://pip-data:8000/v1/content/${event.target.value}`)
);

Dropdown does not collapse when the option is selected in angular

Hi all could anyone help me with the below error please
i am having problem with the dropdown menu collapse i can select the option but the dropdown does not collapse when the option is selected and when i collapse it manually it gives me the below error
ERROR
core.js:4197 ERROR TypeError: this._documentClickListener is not a function
I have this function which select two different dataset
isFemaleSelected: boolean = true;
callMe(option: number) {
if (option === 1) {
this.AreaChartComponentRef.data = areaChartDataFemale;
this.AreaChartComponentRef.updateChart();
this.isFemaleSelected = true;
} else {
// this.isFemaleSelected = false;
this.AreaChartComponentRef.data = areaChartDataMale;
this.AreaChartComponentRef.updateChart();
this.isFemaleSelected = false;
}
Html code
When (click)="callMe(1) one is selected it displays the female and (click)="callMe(2) displays Male
<div
*ngIf="control"
class="btn-group float-right float-none-xs mt-2"
dropdown
>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
*ngIf="isFemaleSelected"
>
{{ "dashboards.female-people" | translate }} <span class="caret"></span>
</button>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
*ngIf="!isFemaleSelected"
>
{{ "dashboards.male-people" | translate }} <span class="caret"></span>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a class="dropdown-item" href="javascript:;" (click)="callMe(1)">{{
"dashboards.female-people" | translate
}}</a>
</li>
<li role="menuitem">
<a class="dropdown-item" href="javascript:;" (click)="callMe(2)">{{
"dashboards.male-people" | translate
}}</a>
</li>
</ul>
</div>
```

I solved this problem by creating a new function after callMe(option: number)
switchLabel() {
if (this.isFemaleSelected) {
return 'Female';
} else {
return 'Male';
}
}
and then
<div
*ngIf="control"
class="btn-group float-right float-none-xs mt-2"
dropdown
>
<button
id="button-basic"
dropdownToggle
type="button"
class="btn btn-outline-primary btn-xs dropdown-toggle"
aria-controls="dropdown-basic"
>
{{ switchLabel() }}<span class="caret"></span>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a
class="dropdown-item"
href="javascript:;"
(click)="switchData(1)"
>{{ "dashboards.female-people" | translate }}</a
>
</li>
<li role="menuitem">
<a
class="dropdown-item"
href="javascript:;"
(click)="switchData(2)"
>{{ "dashboards.male-people" | translate }}</a
>
</li>
</ul>
</div>

Trying to get the Bootstrap dropdown button text to change to the item selected

I'm using bootstrap to style a dropdown button and I'd like to have the button text change to whatever item is selected from the dropdown. I'm guessing JavaScript is the best way to make this happen, but I'm not that familiar with it yet. Any help would be greatly appreciated.
Here is my html for the first dropdown button. Thanks
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genre
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button">Adventure</button>
<button class="dropdown-item" type="button">Sci-Fi</button>
<button class="dropdown-item" type="button">Comedy</button>
</div>

#finiteloop thanks for your help. Based on the direction you pointed me in I added an onclick event for each dropdown element and added the following function which does what I need:
<div class="dropdown mx-3">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genre
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button" onclick="showGenre(this)">Adventure</button>
<button class="dropdown-item" type="button" onclick="showGenre(this)">Sci-Fi</button>
<button class="dropdown-item" type="button" onclick="showGenre(this)">Comedy</button>
</div>
</div>
function showGenre(item) {
document.getElementById("dropdownMenu1").innerHTML = item.innerHTML;
}

#MasterShake20 you could do something like this and integrate it into your code:
<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected fruit to banana.</p>
<button id="btnTxt" type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let buttonVal = document.getElementById("mySelect").value;
document.getElementById('btnTxt').innerHTML = buttonVal;
}
</script>
</body>
</html>
See how this works here:
https://www.w3schools.com/code/tryit.asp?filename=GI7I2WCF1N82
This is not exactly what you are trying to do, but it could set you in the right direction and give you an idea of what needs to happen.
Also, if you are just starting out, W3 is a great resource, so check their JavaScript Tutorials out here:
https://www.w3schools.com/js/default.asp
:D

with jquery is easy:
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
$(".dropdown-toggle").next(".dropdown-menu").children().on("click",function(){
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
</script>
if you have more components in your page and want this behavior for specifics components,
add an property to correct select only its:
(in this example, add property changeable="true")
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" changeable="true">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
$(".dropdown-toggle[changeable=true]").next(".dropdown-menu").children().on("click",function(){
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
</script>
$(".dropdown-toggle").next(".dropdown-menu").children().on("click", function() {
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>

Selected value in drop down returning undefined in javascript

I'm trying to select a value from the drop down and pass the value in the JavaScript function. But in the JavaScript function i'm getting the value undefined. How can i resolve this?
Here goes the html
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu" onclick="dropDown_chooser()">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
and the javaScript
function dropDown_chooser() {
var select = document.getElementById("chooser");
var select_val = select.value;
console.log("select val" + select_val);
}

var dropdown = document.querySelectorAll('#chooser > li');
dropdown.forEach(function(item){
item.addEventListener('click',function(){
console.log(this.getAttribute('value'));
})
})
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>

I guess you are using bootstrap by looking at the classes you have used; you can go with the following code then
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
And using jQuery
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).parent('li').attr("value");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
console.log("select val = " + param);
});
});

As stated in the comments, this is not a dropdown menu ,using "select" and
"option" is the proper way and you should use "onchange" instead of "onclick".
I posted it, like this it works, hope this helps!
function getvalue(){
var skillsSelect = document.getElementById("chooser");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);
alert(selectedText);
}
<div class="input-group-btn search-panel">
<select class="dropdown-menu" id="chooser" role="menu"
onchange="getvalue()">
<option value="type"><a href="#">Type</option>
<option value="loc"><a href="#">Location</option>
<option value="name"><a href="#">Name</option>
<option value="sal"><a href="#">Salary</option>
</select>
</div>
.

bootstrap drop down button aligns on the wrong side

When you click on the dropdown ul, the list items (<li>) are shown all the way to the left..
As you can see in my simplified jfiddle example:
http://jsfiddle.net/3bfvvkbh/
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

The dropdown has be in a seperate btn-group.
See my updated fiddle and also the Bootstrap Docs - #Nested Button groups
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
</div>

Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right", Demo
<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
<li> <a>2010</a>
</li>
</ul>

Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.
<div class="btn-group">
Dropdown
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
http://jsfiddle.net/3bfvvkbh/2/

Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu
See: http://jsfiddle.net/3bfvvkbh/6/
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});