This question already has answers here:
get wrong value in data attribute jquery
(4 answers)
Closed 2 years ago.
As you can see on click i change data-id on button .dropdown-toggle if you check in browser inspect element menu you will see data-id is change everytime when you click different a element but console.log show everytime same data-id, any ideas why this and how to fix it ?
$(document).on('click', '.dropdown-menu a', function(){
var id = $(this).data('id');
$('.dropdown-toggle').html($(this).text() +'<span class="caret"></span>');
$('.dropdown-toggle').attr('data-id', ''+id+'');
console.log($('.dropdown-toggle').data('id'));
})
$('ul li').on('click', function(){
var id = $('.dropdown-toggle').data('id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-id="1" class="dropdown-item" href="#">Action</a>
<a data-id="2" class="dropdown-item" href="#">Another action</a>
<a data-id="3" class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
You can simply use jQuery data() method to set the id value:
$(document).on('click', '.dropdown-menu a', function() {
var id = $(this).data('id');
$('.dropdown-toggle').html($(this).text() + '<span class="caret"></span>');
$('.dropdown-toggle').data('id', id);
console.log($('.dropdown-toggle').data('id'));
})
$('ul li').on('click', function() {
var id = $('.dropdown-toggle').data('id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-id="1" class="dropdown-item" href="#">Action</a>
<a data-id="2" class="dropdown-item" href="#">Another action</a>
<a data-id="3" class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
Related
I have many (dynamic) input with each having its own dropdown
I want to keep the dropdown popup in focus when the current input is active/being typed , now the issue is my dropdown menu closes when I type in textbox
I cannot use ID selector and hard code since the number of dropdowns are dynamic.
I have tried with
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." id="myInput" class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function(){
$('.dropdown-item').click(function(e){
var value = $(this).data('value');
var textElement = $(this).parent().parent().prev()
textElement = textElement.val(textElement.val() + value);
event.preventDefault();
event.stopPropagation();
textElement.focus()
});
});
$(".search").keyup(function(){
var input, filter, ul, li, a, i;
input = $(this).get(0);
filter = input.value.toUpperCase();
div = $(this).parent().get(0);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});
(function() {
var disable = false;
$('.dropdown-toggle').on('mousedown touchstart', function() {
disable = true;
console.log("inside1")
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle'); console.log("inside2")
}
})
.on('mouseup touchend',function() {
disable = false;console.log("inside3")
})
})()
</script>
</body>
</html>
$(document).ready(() => {
$(".input-group > input")
.on("focus", (e) => {
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
$(dropdownEl).show();
})
.on("blur", (e) => {
// If click outside the input, check for condition to hide the dropdown
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
let dropdownSearchEl = dropdownEl.querySelector('.search');
if (e.relatedTarget == dropdownSearchEl) {
// Check if the target is the input insdie dropdown, then return to prevent the dropdown hiding
return;
}
$(dropdownEl).hide();
})
.on('keyup', (e) => {
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
let dropdownSearchEl = dropdownEl.querySelector('.search');
// Un-comment here if you want to set the value of the dropdown input as the value of the actual input
// dropdownSearchEl.value = inputEl.value;
});
$(".search")
.on("blur", (e) => {
// When click outside the dropdown search input, hide the dropdown
let dropdownInputEl = e.currentTarget;
let dropdownEl = dropdownInputEl.parentElement;
$(dropdownEl).hide();
})
.on("keyup", function() {
var input, filter, ul, li, a, i;
input = $(this).get(0);
filter = input.value.toUpperCase();
div = $(this).parent().get(0);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." id="myInput" class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</script>
</body>
</html>
Since you are using Bootstrap dropdown, you can use its Popover methods to toggle show/hide the dropdown Bootstrap Popover.
The steps I do to achieve what you want:
Assign event focus and blur on the input to show/hide the dropdown. Inside the blur event, I check for the condition if the user click on the dropdown's input, then still keep the dropdown opening
Assign the event blur on the dropdown input to hide the dropdown
Ps: Using the jQuery event you can get the related DOM element, to experiment a little bit further, you can log the event then use the Devtool to look for the element you want to get. As you can see, in the script, I use event.currentTarget to get the element that the user click on. That's solve the problem.
I created a dropdown list by follow code, but in implementation I can't see its sub-item, actually its item "game" in this code doesn't have shown.
Is any other CDN required?
implementation's pic
<head>
<title>...</title>
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
...................................................
<ul class="nav justify-content-end">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
<div class="dropdown">
<a class="dropdown-item" href="#"> game</a>
<a class="dropdown-item" href="#"> tech</a>
<a class="dropdown-item" href="#"> learn</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">Active Listings</a>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dropdown/2.0.3/jquery.dropdown.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
(bootstrap.min.js) CDN shouldn't be in <head> it's should be at the end of the <body>.
I want to align my dropdown menu (responsively) on the right side of the page while keeping the "Create Event" button on the left. The docs call for adding .dropdown-menu-end to the ul class--which didn't work--so I've added it to every class for my dropdown and still no luck.
What's going on with my code?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div>
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<span class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
You can use Bootstrap's flex utilities to justify the buttons with space between them. I've added d-flex and justify-content-between to the parent element.
The reason your approach didn't work is because that documentation refers to dropdown alignment with respect to the button, not the button with respect to the page (or parent element).
I've also converted your surrounding span to a div. Spans are usually associated with inline content. If nothing else it makes your markup more intuitive to the reader. It also makes the code auto-format a bit more cleanly. Compare your snippet to mine--I used the Tidy button on both.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class="d-flex justify-content-between">
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<div class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
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>
I have markup for twitter bootstrap dropdown like below
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
Now, added click event in dropdown using jquery as below
$('.dropdown-menu a').click(function () {
alert("Hi")
});
My click event is working but, I am not able to update the selected value in dropdown. How to do it?
$('.dropdown-menu a').click(function () {
$('button').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
use $('button').text($(this).text()); to set value to button.
try this
$('.dropdown-menu a').click(function () {
$('button[data-toggle="dropdown"]').text($(this).text());
});
DEMO HERE