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}`)
);

ui bootstrap append dropdown-append-to doesnt work

Im having this code with a ui-bootstrap dropdown:
<div class="btn-group" style="float: right" uib-dropdown keyboard-nav dropdown-append-to="projectTreeBtn.add">
<button type="button" class="btn btn-default projectTreeBtn" ng-click="deleteElement()"><span class="glyphicon glyphicon-remove"></span> Löschen</button>
<button type="button" class="btn btn-default projectTreeBtn" id="projectTreeBtn.add"><span class="glyphicon glyphicon-plus"></span> Hinzufügen</button>
<button type="button" class="btn btn-default projectTreeBtn" uib-dropdown-toggle><span class="caret"></span></button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="projectTreeBtn.add">
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
</ul>
</div>
I want the dropdown to be appended to the second button, but it always appears to be like this

link not work in Bootstrap dropdown button

This is my code :
<div class="btn-group" data-toggle="dis-rclick" data-target="#rightclickAlert">
<button type="button" class="btn btn-info">Translator</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="label-info" style="display: none">
Edit
</li>
<li class="label-danger">
Disable
</li>
</ul>
When I open the drop down list and click on any item i don't get any response.
For example: When I click on Edit I want to reload page but that doesn't work.
Whats wrong?

Toggle bootstrap button dropdown using another button

Been having some issues getting a Bootstrap button dropdown to toggle (making the list items and dropdown ul element visible) when another button is clicked. Here's what I have so far which doesn't seem to work (v3.3.7). I want the "testing" button to additionally toggle the "test" button dropdown.
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').dropdown('toggle')">testing</a>

You can use the custom attribute data-target to target the button group, so clicking on any element outside will trigger the dropping-down on the targeted button group.
<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target=".btn-group">
testing</a>
You should give your button group an id, so that the data-target is more specific.
Demo

Try .toggle('dropdown') instead of .dropdown('toggle'):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').toggle('dropdown')">testing</a>

Activate Dropdown Toggle on Default button

I was trying to activate dropdown toggle button on the click of default button but by doing debigging i get to know that dropdown comes but it then disappears.
I am unable to recollect why is it happening?
I have put my code on http://jsfiddle.net/9r14uuLw/31/
<div class="row">
<div class="col-sm-4">
<!-- Button Group -->
<label><h5>Status</h5></label>
<div class="btn-group btn-group" >
<button type="button" class="btn btn-default" id = 'StatusBtn' onclick="clicktogglebutton()" >Select One</button>
<button type="button" class="btn btn-default dropdown-toggle" id = 'togglebtn1' data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Status 1</li>
<li>Status 2</li>
<li>Status 3</li>
</ul>
</div>
</div>
</div>
Please do loo at it and let me know , what may be the possible tweak i need in the code to make it work.

It would be preferable to use a standard <select> element for this role, as it's better both functionally and semantically.
However, if you're set on rolling your own, why have two buttons? Try condensing it to a single element:
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select One
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>