.click event (jQuery) for <li> element in dropdown menu (Bootstrap) - javascript

I'm using Bootstrap and I've the following drop down menu:
<span class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
<ul class="dropdown-menu" role="menu">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</span>
I would like to use the .click event of jQuery to check if the first item is being clicked:
$(function () {
$("#one").click(function() {
alert("Alert!");
});
});
Unfortunately that's not working.
When the list item is NOT in the dropdown menu it works perfectly.
Thanks for any support in advance!


Just Copy and Check, its Working..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#one").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<span class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Toggle</button>
<ul class="dropdown-menu" role="menu">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</span>
</body>
</html>
DEMO

Related

Select value from dropdown menu which is dynamically created in table

I have a table created with dynamically created number of rows. Every row has a dropdown-menu button.
I want to show the selected item from dropdown-menu on the dropdown-menu button, but am unable to do so. Below is my code:
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu" onchange="selectFromDropDown(this.value)">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>
The javascript code is as below
function selectFromDropDown(value){
$(document).ready(function() {
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.html($(this).text());
parent.val($(this).data('value'));
});
});
}

Try text() instead of html():
parent.text($(this).text());
Also, $(this).data('value')) is undefined. So the attribute value will not be set to anything.
I will suggest you to use $(document).ready(function() { to wrap the whole code instead of using it inside the function.
$(document).ready(function() {
function selectFromDropDown(value){
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.text($(this).text().trim());
parent.val($(this).data('value'));
});
}
selectFromDropDown($('.dropdown-menu').val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>

jquery dropdown btn bootstrap set default value

I have dropdown like below
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Items
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>value1</li>
<li>value2</li>
</ul>
</div>
How can I add default dropdown value as value1 when page loads for first time instead of Items

Here you go!
//How can I add default dropdown value as value1 when page loads for first time instead of Items
$(function(){
//bind event
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
console.log(selText);
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
//trigger event
$('.dropdown-menu li a').first().trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Items <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>value1</li>
<li>value2</li>
</ul>
</div>

Bootstrap dropdown not displaying selected value

Working with latest Bootstrap 3.3.6 and jQuery library 1.11.3, I'm trying to have dropdown display the selected value when the user selects one of the options. So far it looks like the dropdown ul won't display at all.
HTML:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select One
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li>A</li>
<li>B</li>
</ul>
</div>
JS:
$(".dropdown-menu li a").click(function() {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
I referred to this thread for a working JS function but no avail: How to Display Selected Item in Bootstrap Button Dropdown Title
Current JSFiddle: https://jsfiddle.net/9xzqdry9/

You just need to reference your bootstrap.js AFTER your jquery.js
$(".dropdown-menu li a").click(function() {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.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">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select One
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li>A</li>
<li>B</li>
</ul>
</div>

I saw your Current JSFiddle
You should import first jQuery then Boostrap.js!

bootstrap drop down button aligns on the wrong side

When you click on the dropdown ul, the list items (<li>) are shown all the way to the left..
As you can see in my simplified jfiddle example:
http://jsfiddle.net/3bfvvkbh/
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

The dropdown has be in a seperate btn-group.
See my updated fiddle and also the Bootstrap Docs - #Nested Button groups
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
</div>

Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right", Demo
<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
<li> <a>2010</a>
</li>
</ul>

Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.
<div class="btn-group">
Dropdown
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
http://jsfiddle.net/3bfvvkbh/2/

Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu
See: http://jsfiddle.net/3bfvvkbh/6/
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

Issue On Adding Slide Function on Bootstrap 3 Button Dropdown

Can you please take a look at This Demo and let me know why I am not able to add slide function to the Bootstrap 3 button dropdown?
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script>
$('.dropdown-toggle').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown-toggle').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
</script>
Thanks

All dropdown events are fired at the .dropdown-menu's parent element. link
You need to use
$('.btn-group').on('show.bs.dropdown', function() { ... });
See this fiddle.

Working Example
http://jsfiddle.net/br0jkp1u/6/
$('#example').on('click', function () {
$('ul.dropdown-menu').slideToggle();
});
<button id="example" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

Check in updated fiddle:http://jsfiddle.net/br0jkp1u/7/
[Fiddle][1]

Categories

Resources