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>
Related
Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">
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!
I need to make a div as a dropdown and when clicking on it,
the menu slides and shows its items.
I've tried to implement this but when clicking on the div it doesn't show
it's items at all.
I've used this reference:
http://getbootstrap.com/javascript/#dropdowns-examples
Here's the way I've implemented this:
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
</div>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</div>
How can it be solved ?
There's 2 things wrong here:
You're mixing both data-* attributes and JavaScript initialization, it should be either one or the other (maybe this isn't a real problem, but it is unnecessary and messy).
You haven't followed the example correctly, the dropdown trigger and contents need to both be contained within the div with class "dropdown".
Change the HTML to:
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
No JS required (just include the bootstrap.js and it should do the rest).
Working fiddle:
https://jsfiddle.net/dpjpcfuy/1/
You can do this easily with data-target attribute
<ul class="no-bullets droppable-menu">
<li>Our Story</li>
<li>Our Menu</li>
</ul>
target is in the div
<div class="dropdown-menu" id="m-target-1">
... content in your div
</div>
<div class="dropdown-menu" id="m-target-2">
... content in your div
</div>
and remove
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
from your JS code. This should work!
I've got a Bootstrap dropdown list which is bound to some data with Knockout and that works as expected. However, when I select an item in the dropdown, I want to be able to display that as the dropdown text.
javascript:
<script type="text/javascript">
$(".dropdown-menu li a").click(function () {
$(this).parents(".btn-group").find('.selection').text($(this).text());
$(this).parents(".btn-group").find('.selection').val($(this).text());
});
</script>
html:
<asp:Content ID="body" ContentPlaceHolderID="body" runat="Server">
<div id="main">
<div class="container">
<div data-bind="template: { name: 'TillGroups' }"></div>
</div>
</div>
<script id="TillGroups" type="text/html">
<label for="ddm">Till group:</label>
<div id="ddm" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: StockCount.ReadTillGroupsValue">
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name"></a></li>
</ul>
</div>
</script>
</asp:Content>
P.S. I've search on here for similar questions such as the following but the answers posted there don't appear to work:
How to Display Selected Item in Bootstrap Button Dropdown Title
How to display selected item in the title of the bootstrap dropdown list ? and how to display selected item on a javascript alert box?
You can do something like this
<script id="TillGroups" type="text/html">
<label for="ddm">Till group:</label>
<div id="ddm" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="text: selectedValue"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: StockCount.ReadTillGroupsValue">
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name, click: $root.selectGroupValue"></a></li>
</ul>
</div>
</script>
add data bind click handler to your li items as
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name, click: $root.selectGroupValue"></a></li>
and in your view model, define a observable as
self.selectedValue = ko.observable("")
and a click handler as
self.selectGroupValue = function(group){
self.selectedValue(group.Name)
};
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