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>

1 button is opening 2 dropdowns on bootstrap

I'm creating a 2 different dropdown, however, they're opening the same dropdown menu.
My code;
<div class="d-flex">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
How can I fix this?

As the documentation states and shows you:
Wrap the dropdown’s toggle (your button or link) and the dropdown menu
within .dropdown
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

How to use Javascript if statement when linked with bootstrap dropdown menu

I've hit a wall with trying to get my JavaScript if statement to work when using bootstraps drop down menu.
Goal: There are 2 drop down menu's. The user will select one value from each, based on what the user selects something will happen. I've seen many examples using the method however bootstrap seems to be a bit different. Also, I've seen a lot of people recommend jQuery because it's easier but I prefer to use Javascript (I'm learning). If someone can point me in the right direction I would appreciate it, or if my approach is totally off base please kindly let me know the right approach. Also, I currently don't have the "id" in my html because I'm not sure where to put it. Cheers.
HTML:
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><img src="img/brown_eye.jpg" class="rounded-circle" value="brown"> Brown</a>
<a class="dropdown-item" href="#"><img src="img/blue_eye.jpg" class="rounded-circle" value="blue"> Blue</a>
<a class="dropdown-item" href="#"><img src="img/green_eye.jpg" class="rounded-circle" value="green"> Green</a>
<a class="dropdown-item" href="#"><img src="img/hazel_eye.jpg" class="rounded-circle" value="hazel"> Hazel</a>
</div>
</div>
<!--Drop down Item 2-->
<h4 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h4>
<div class="dropdown">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" onchange="dropdownChange();">
<a class="dropdown-item" href="#"><img src="img/fair.jpg" class="rounded-circle" value="fair"> Fair (porcelain)</a>
<a class="dropdown-item" href="#"><img src="img/light.jpg" class="rounded-circle" value="light"> Light (fair to light)</a>
<a class="dropdown-item" href="#"><img src="img/medium.jpg" class="rounded-circle" value="medium"> Medium (light to medium)</a>
<a class="dropdown-item" href="#"><img src="img/bronze_dark.jpg" class="rounded-circle" value="bronze"> Bronze dark (deep tan)</a>
<a class="dropdown-item" href="#"><img src="img/tan.jpg" class="rounded-circle" value="tan"> Tan (warm to medium)</a>
<a class="dropdown-item" href="#"><img src="img/dark.jpg" class="rounded-circle" value="rich"> Rich (deep)</a>
</div>
</div>
<br>
<!--Result-->
<button type="button" class="btn btn-info btn-lg active" style="background-color: #3e4444;"> Submit</button>
JS:
function validate() {
var a =document.getElementById("eye_color").value;
var b =document.getElementById("skin_tone").value;
if (a == "green" && b == "fair"){
alert("Brown is your best hair color!!");
}
}

Here is a pure Javascript (no jQuery) example of what I think you have asked for.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
//////////////////////////
//////////////////////////
//put your extra conditions below
//////////////////////////
//////////////////////////
if (eyeColor=="brown" && skinTone=="fair"){
alert("You should have w/e colour hair...");
} else if (eyeColor=="brown" && skinTone=="tan"){
alert("You should have w/e colour hair...");
}
}
else if (!eyeColor){
alert("Please pick an eye colour");
}
else if (!skinTone){
alert("Please pick a skin tone");
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
if (!menu.attributes.onchange) return;
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
</script>
</head>
<body>
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown"><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue"><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green"><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel"><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
<!--Drop down Item 2-->
<h4 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h4>
<div class="dropdown">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair (porcelain)</a>
<a class="dropdown-item" href="#" data="light"><img src="img/light.jpg" class="rounded-circle" > Light (fair to light)</a>
<a class="dropdown-item" href="#" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium (light to medium)</a>
<a class="dropdown-item" href="#" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze dark (deep tan)</a>
<a class="dropdown-item" href="#" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan (warm to medium)</a>
<a class="dropdown-item" href="#" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich (deep)</a>
</div>
</div>
<br>
<!--Result-->
<button type="button" class="btn btn-info btn-lg active" style="background-color: #3e4444;" onclick="validate()"> Submit</button>
</body>
</html>

Select 'this' object of clicked element only (not the other elements within the same class)

I am trying to change buttons text on click (using Bootstrap 4). I have a problem with using the correct syntax.
My html:
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Option 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Type 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Type 2</a>
<a class="dropdown-item" href="#">Type 3</a>
</div>
</div>
and JS:
$(".dropdown-menu a").click(function () {
$(".btn:first-child").html($(this).text());
});
To rephrase - when I click on one button and change its value, the other one changes too...
So I would like to change this value of the only clicked.

You need to change the html of the .btn relative to your link.
You can do that by selecting the closest .btn-group to your link, then searching for .btn inside it :
$(".dropdown-menu a").click(function () {
$(this).closest('.btn-group').find('.btn').html($(this).text());
});
$(".dropdown-menu a").click(function() {
$(this).closest('.btn-group').find('.btn').html($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Option 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Type 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Type 2</a>
<a class="dropdown-item" href="#">Type 3</a>
</div>
</div>

$(".dropdown-menu a").click(function () {
var text = $(this).text();
$(this).closest('.btn-group').find('.btn').html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Option 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
Type 1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Type 2</a>
<a class="dropdown-item" href="#">Type 3</a>
</div>
</div>

Try
$(".dropdown-menu a").click(function () {
$(this).parent().find(".btn:first-child").html($(this).text());
});