Develop Reference

How to change the value of parent when i trigger a child?

I want to do something like a dropdown so that my user can pick whether they want gmail, hotmail, or outlook. And then, I want the button to update to show their preference. I must use bootstrap only and thus cannot use < select> due to assignment reasons.
So far, I've tried giving them all the same id, but JS just used the first one, and i dont want to give them all different IDs (too troublesome). So what I've written is to use the child number (like an array) and putting the value into the button. However, I have no idea how to find out the position number of the current html tag. Please help me and thank you for the help in advance
Bootstrap CDN used (Bootstrap 4.6.0):
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button' onclick='example()'>#gmail.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#hotmail.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#outlook.com</a>
<a class="dropdown-item" role='button' onclick='example()'>#yahoo.com</a>
</div>
</div>
<script>
function example() {
var c = document.getElementById('emailexample').children;
txt = c[i].textContent
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>

This should do the trick!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id='btnemailexample' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#example.com
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#gmail.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#hotmail.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#outlook.com</a>
<a class="dropdown-item" href="#" role='button' onclick='example(this)'>#yahoo.com</a>
</div>
</div>
<script>
function example(el) {
var txt = el.textContent;
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>

In your case you don't need the search the id or the children, you can just use the event param.
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button' onclick='example(event)'>#gmail.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#hotmail.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#outlook.com</a>
<a class="dropdown-item" role='button' onclick='example(event)'>#yahoo.com</a>
</div>
</div>
<script>
function example(event) {
var txt = event.target.textContent;
document.getElementById("btnemailexample").innerHTML = txt;
}
</script>

A best solution in this case would be to use event delegation which will reduce your ID or Classes markup issue, adding function to every element, etc. It will help you get your required data as well.
Here is a good article on event delegation

You could do this a lot better if you have some JavaScript library like jQuery. I'll show you how to do it by both means.
Please note that I have not linked any styles. So make sure to link them for better viewability.
Using Core Javascript
// Add event listener to table
const el = document.getElementById("emailexample");
el.addEventListener("click", function(e) {
e = e || window.event;
var target = e.target || e.srcElement,
text = target.textContent || target.innerText;
document.getElementById("btnemailexample").textContent = text;
}, false);
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button'>#gmail.com</a>
<a class="dropdown-item" role='button'>#hotmail.com</a>
<a class="dropdown-item" role='button'>#outlook.com</a>
<a class="dropdown-item" role='button'>#yahoo.com</a>
</div>
</div>
Using jQuery
$("#emailexample .dropdown-item").on('click', function(e) {
e.preventDefault();
var text = $(this).text();
$("#btnemailexample").text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>#example.com</button>
<div class="dropdown-menu" id='emailexample'>
<a class="dropdown-item" role='button'>#gmail.com</a>
<a class="dropdown-item" role='button'>#hotmail.com</a>
<a class="dropdown-item" role='button'>#outlook.com</a>
<a class="dropdown-item" role='button'>#yahoo.com</a>
</div>
</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>

Bootstrap Dropdown: How to set active link to display value on button?

I created a dropdown list that will be used to choose the number of images to display on one page. I would like to set a default and show that default value on the button itself instead of a label. I already know how to do this when a a selection if made, but not for a default value
$('.dropdown1 button').click(function(){
$('#show').text($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="btn-group btn-group1 mr-4">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="show"></span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown1">
<button class="dropdown-item" type="button">24</button>
<button class="dropdown-item" type="button">16</button>
<button class="dropdown-item" type="button">32</button>
<button class="dropdown-item" type="button">All</button>
</div>
</div>

You could use an id to set the desired default selected value, then use the $(document).ready(...) event to set the default value via jQuery.
On the 'option' that you want to be the default:
<button id="default-option" class="dropdown-item" type="button">24</button>
jQuery Snippet:
$('#show').text($(".dropdown1 button[id='default-option']").text());
Something like this:
$('.dropdown1 button').on('click', function(){
$('#show').text($(this).text());
});
$(document).ready(function() {
$('#show').text($(".dropdown1 button[id='default-option']").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="btn-group btn-group1 mr-4">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="show"></span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown1">
<button id="default-option" class="dropdown-item" type="button">24</button>
<button class="dropdown-item" type="button">16</button>
<button class="dropdown-item" type="button">32</button>
<button class="dropdown-item" type="button">All</button>
</div>
</div>

Here's how I did it. Set an id="default" and set $('#show).text() to $('#default).text().
Seems to work.
$('#show').text($('#default').text());
$('.dropdown1 button').click(function(){
$('#show').text($(this).text());
});
<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="btn-group btn-group1 mr-4">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="show"></span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown1">
<button class="dropdown-item" type="button" id="default">24</button>
<button class="dropdown-item" type="button">16</button>
<button class="dropdown-item" type="button">32</button>
<button class="dropdown-item" type="button">All</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

how to get dropdown-menu item value and apend to text input?

I want to change the value of a text box with the item I select from a dropdown menu. But it's not working.
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>
This is my jquery code:
$('.dropdown-item').click(function (){
$('#area-inout').val() = $('.dropdown-item').text();
})
Can anyone help me?

try :
$('.dropdown-menu .dropdown-item').on('click', function(){
$("#area-zone").val($(this).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Jway</a></li>
<li><a class="dropdown-item" href="#">Atrod</a></li>
</ul>
</div>

Try this
$('.dropdown-menu .dropdown-item').on('click', function(){
$("#area-zone").val($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item d-area-input" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>

Try this!
$("div#dropDownSelect").click(function(e){
document.getElementById('inputBox').value = e.target.innerHTML;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputBox" value="" class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div id="dropDownSelect" class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item d-area-input" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>

Please change the dorpdown_name with your selectbox name
<script>
$('select[name="dorpdown_name"]').change(function() {
$('#area-zone').val($(this).val());
})
</script>

Bootstrap dropdown menu stuck in expanded position, doesn't respond to button

I'm trying to make a simple sign in program for use in a podium at my office. All that this program is responsible for is allowing clients to put in their name, username, description of their problem, and click submit. this information will then get put into a CSV.
This all works fine, however the Bootstrap 4 dropdown menu I have included is always stuck open. It defaults to expanded when the page loads, and remains open regardless of clicking the button or not.
My code is almost exactly the same as the example code shown on Bootstraps site:
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="display: block">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>
And here are my imports:
<script src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
EDIT: This issue seems to only exist within the Electron/Node.JS enviornment. running my html/css within chrome (by launching the index.html file) works as expected and does not show any errors in the developer console.

"the Bootstrap 4 dropdown menu I have included is always stuck open"
The dropdown remains "open" because it has inline style "style:display:block". Remove this and follow the normal dropdown structure...
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/ViKYGOigbL

You have to import bootstraps.bundle.js, too. Otherwise it will not toggle:
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
take note that you're importing jquery before importing boottsraps js-file
You also have to remove style="display: block" from your dropdown-menu. This display: block; is the reason why your menu stucks in expanded position.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<!-- imported jquery, bootstraps css and bootstraps bundle.js -->
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- removed style="display: block;" -->
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>