How to show drop down select in button in html? - javascript

Here I am listing hour and minute in two different buttons. I can able to drop down hour and minute, but not showed selected value in button.
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary"
data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
<button type="button" class="btn btn-secondary">am</button>
<button type="button" class="btn btn-secondary">zone</button>
<button type="button" class="btn btn-primary">Set</button>
</div>
And javascript I used
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
By using above js code I can able to display selected value in button, but it changes value to all drop down list.
Here is the screenshots which i am getting


it changing value for all – PvDev
Is your problem the dropdown or setting the values to the right section? Maybe this will help. Not sure if i understood your question:
Jquery
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
var currentBtn = $(this).closest(".btn-group").children("button");
var currentUnit = currentBtn.data("unit");
currentBtn.html(selText);
console.log(currentUnit);
$("."+ currentUnit).text(selText);
});
Html
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" data-unit="hours" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
</div>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" data-unit="minutes" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>
<div class="output">
<button type="button" class="hours btn btn-secondary">am</button>
<button type="button" class="minutes btn btn-secondary">zone</button>
<button type="button" class="seconds btn btn-primary">Set</button>
</div>
https://jsfiddle.net/Rakowu/t982sLuj/1/
I gave your group elements a data attr to figure out what kind of unit your clicking on. Than i select the output element with the callback.
Hope it will help
(If there are ideas on how reduce my code i'll glad to here about it :D)


You forgot to close the divs
$(".dropdown-menu a").click(function() {
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>

Related

Space between menu items in Bootstrap 4

I am beginner web developer. I make project in Bootstrap 4.
I have small problem with to large space between menu items (top menu, nav)
I have this code:
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100">
<a class="navbar-brand" href="/"><img src="http://roelle.test/img/logo.jpg" class="pb-2"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<form class="mx-lg-5" action="" method="">
<div class="inner-addon rounded-0 navbar-search-form">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Szukaj produktu"
aria-label="Szukaj produktu" name="query"/>
</div>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Kategorie <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown1" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Books <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown2" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Comic Book <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown2">
<a class="dropdown-item"
href="produkty/marvel-comic-book">- Marvel Comic Book</a>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle"
href="#"
id="navbarDropdown4"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">- DC Comic Book
<i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown4">
<a class="dropdown-item"
href="produkty/computer-science">- Computer Science</a>
</div>
</div>
<a class="dropdown-item"
href="produkty/action-comics">- Action comics</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown6" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Textbooks <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown6">
<a class="dropdown-item"
href="produkty/business">- Business</a>
<a class="dropdown-item"
href="produkty/finance">- Finance</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown10" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Electronics <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown10">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown11" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- TV <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown11">
<a class="dropdown-item"
href="produkty/led">- LED</a>
<a class="dropdown-item"
href="produkty/blu-ray">- Blu-ray</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown14" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Mobile <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown14">
<a class="dropdown-item"
href="produkty/samsung">- Samsung</a>
<a class="dropdown-item"
href="produkty/iphone">- iPhone</a>
<a class="dropdown-item"
href="produkty/xiomi">- Xiomi</a>
</div>
</div>
</div>
</div>
<a class="dropdown-item"
href="produkty/no-1">no 1 </a>
<a class="dropdown-item"
href="produkty/no-1-disable">no 1 disable </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dla klienta <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/p/kontakt">Kontakt</a>
<a class="dropdown-item" href="/p/koszty-i-warunki-dostawy">Koszty i warunki dostawy</a>
<a class="dropdown-item" href="/p/o-nas">O nas</a>
<a class="dropdown-item" href="/p/polityka-prywatnosci">Polityka prywatności</a>
<a class="dropdown-item" href="/p/pomoc">Pomoc</a>
<a class="dropdown-item" href="/p/poradnik">Poradnik</a>
<a class="dropdown-item" href="/p/raty">Raty</a>
<a class="dropdown-item" href="/p/regulamin">Regulamin</a>
<a class="dropdown-item" href="/p/reklamacje-i-zwroty">Reklamacje i zwroty</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="http://roelle.test/kontakt">Kontakt</a>
</li>
<li class="nav-item">
<li class="nav-item position-relative">
<a class="nav-link" href="http://roelle.test/koszyk"><img
src="http://roelle.test/img/basket.jpg" class="pl-lg-4 pr-2">
<span
class="badge badge-primary count">0</span>
<span class="d-lg-none d-xl-inline">Koszyk</span></a>
</li>
</ul>
</div>
</nav>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
I have preview : http://serwer1356363.home.pl/_nauka/
Why after expanding Category => Books is there such a big gap between Books and Comic Books and then Comics and Marvel Comic Book?
How can I repair it?
Please help me

Remove the line of code shown in the image.
And add the following to your css
.dropdown-menu { margin: 0; padding: 0; }
It should be fine now

Bootstrap 4 Center Nav Dropdown

I am using bootstrap 4 to create a navigational menu. My navigational items each contain a dropdown menu. When clicked I want this menu to display the same size and be horizontally centered on the page. Ideally, I want this dropdown menu to be the same size as the ul element. At the moment I can't figure out how to do this as I am relatively new to bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100">
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
<a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
<a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
<a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
<a class="dropdown-item text-primary" href="#">Skylights</a>
<a class="dropdown-item" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item" href="#">Domes</a>
<a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
<div class="col-md-4">
<a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Current behaviour:
Expected outcome, centered, and the same size:
result from suggested fix:

Add below CSS.
.dropdown {
position: initial;
}
#media (min-width: 768px) {
.dropdown-menu {
width: 50rem; /* JUST FOR STYLING PURPOSE OF DROPDOWN */
position: absolute;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100">
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
<a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
<a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
<a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
<a class="dropdown-item text-primary" href="#">Skylights</a>
<a class="dropdown-item" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item" href="#">Domes</a>
<a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
<div class="col-md-4">
<a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Bootstrap dropdown menu with select value from list

I made one dropdown menu for a page, but my doubt is how I can keep it updatea value in a button from selected value. My code can update by one value but after select the dropdown menu stops works.
$(".dropdown-menu a").click(function(){
$(".btn:first-child").html($(this).text()+'');
});
.dropdown-menu
{
width: 100% !important;
height: auto !important;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary btn-lg btn-block dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Selecione uma especialidade
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" type="button" value="e01">Clinia da Dor</a>
<a class="dropdown-item" type="button" value="e02">Clinica de Neroendocrinologia</a>
<a class="dropdown-item" type="button">Clinica de Psicologia da Saúde</a>
<a class="dropdown-item" type="button">Clinica de Epilepsia</a>
<a class="dropdown-item" type="button">Clinica de Neurologia</a>
<a class="dropdown-item" type="button">Clinica de Neurocirurgia</a>
<a class="dropdown-item" type="button">Clinica de Neuropsicologia</a>
<a class="dropdown-item" type="button">Clinica Psiquiatrica</a>
</div>
</div>
HTML
<script>
$(".dropdown-menu a").click(function(){
$(".btn:first-child").html($(this).text()+'');
});
</script>
<div class="dropdown">
<button class="btn btn-primary btn-lg btn-block dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Selecione uma especialidade
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" type="button" value="e01">Clinia da Dor</a>
<a class="dropdown-item" type="button" value="e02">Clinica de Neroendocrinologia</a>
<a class="dropdown-item" type="button">Clinica de Psicologia da Saúde</a>
<a class="dropdown-item" type="button">Clinica de Epilepsia</a>
<a class="dropdown-item" type="button">Clinica de Neurologia</a>
<a class="dropdown-item" type="button">Clinica de Neurocirurgia</a>
<a class="dropdown-item" type="button">Clinica de Neuropsicologia</a>
<a class="dropdown-item" type="button">Clinica Psiquiatrica</a>
</div>
</div>
How can I get the text value in button from dropdown menu with javascript.
Thanks
Thanks

Picture Change in Javascript

Well this doesn't worked for me and idk what to do so I ask you guys hopefully you can help me. Script is at the top, in the middle I add picture with id and I want to apply the change on a button below.
function pictureChange()
{
document.getElementById("theImage").src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539113123667";
}
<div style="padding-top:2%;padding-left:42.7%" class="row">
<img id="theImage" src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539091308847" style="width:300px;height:240px">
</div>
<center>
<div class="btn-group" style="padding-top:1%">
<button type="button" class="btn btn-danger" onclick="pictureChange()">Vyberte barvu</button>
<button type="button" class="btn btn-danger dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Hnědá</a>
<a class="dropdown-item" href="#">Lakované dřevo</a>
<a class="dropdown-item" href="#">Olej černá</a>
<a class="dropdown-item" href="#">Olej bílá</a>
<a class="dropdown-item" href="#">Šedá</a>
<a class="dropdown-item" href="#">Světle hnědá</a>
<a class="dropdown-item" href="#">Teak</a>
<a class="dropdown-item" href="#">Zelená</a>
</div>
</div>
</center>

You're trying to change it to the same picture as it was. It's actually working you can't just see it.

Hover issue in navbar with Bootstrap 4

I have created a navbar with Bootstrap 4. When I click on a drop-down menu link, it opens and remains open — when I hover on another drop-down link, they overlap.
I want it such that a dropdown link will be closed if I hover on another dropdown link.
Here is the code of my navbar drop-down:
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="../../js/function.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>

You have to add below jQuery code in your custom js file
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
The issue is when you click on the dropdown link, a class named show is added to .nav-item.dropdown and .dropdown-menu, So you have to remove show class when you hover on others dropdown link
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>

In your code, while mouse over or click event is fired , "show" class is applied to child menu (dropdown-menu) element.
So you can override that class like:
.dropdown-menu.show {
display: none;
}
to solve your issue and to display menu items only on hover

Simple add following CSS lines:
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown > .dropdown-menu,
.dropdown > .dropdown-menu.show {
display: none;
}

Categories

Resources