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!
Related
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>
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>
I'm using dropdown-menu from bootstrap and using jquery for changing the dropdown text on selection. The problem comes when a dropdown-menu is created dynamically using jquery it don't change the text of dropdown-menu on selection but it do change when the same action is performed on static html which is already present in HTML
below is the code..
<script>
$(document).ready(function(){
$(".btn-primary").on("click",function(){
var htmltxt='<div class="dropdown"><button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button><ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1"><li><a>Boolean</a></li><li><a>Character</a></li></ul></div>';
$("body").append(htmltxt);
});
});
$(".dropdown").ready(function(){
$(".dropdown-menu li a").on("click",function(){
var caret=' <span class="caret"></span>';
$($(this).closest(".dropdown").find("button")[0]).text($(this).text()).append(caret);
});
});
<body>
<div class="btn btn-primary"> Add DropDrop</div>
<br></br>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2">
<li><a>Boolean</a></li>
<li><a>Character</a></li>
</ul></div>
</body>
The first dropdowm-menu id="dropdownMenu2" works correctly but the second menu id="dropdownMenu2" which is appended from jquery (js variablehtmltxt) will to respond to the on() event.
Change:
$(".dropdown-menu li a").on("click",function(){
To:
$(document).on("click", ".dropdown-menu li a", function(){
I am trying to implement a dropdown time selector using Bootstrap:
HTML
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
Javascript
$('#from li').on('click', function(){
$('#from-text').val($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').val($(this).text());
});
I am trying to select the time and then update the dropdown value to represent that time. Using the above code, when I click the dropdown value, it does not indeed update the text. No errors were found in the console either.
Attach the event on <a> element.
JavaScript:
$('#from li a').on('click', function(){
$('#datebox').text($(this).text());
});
$('#to li a').on('click', function(){
$('#datebox').text($(this).text());
});
You can have two dropdowns in different .btn-group divs.
HTML:
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
<div class="btn-group">
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
If you want to replace the text inside an element, use text(newText).
$('#from-text').text($(this).text());
Missing the ID for the element in your HTML. Where ever you want to add the value for datebox give it an id="datebox"
but right now your code is going to update the same box value so you might want to change the id names so one is getting the value from "From" and the other to "TO"
If you want to entirely replace the text use the text() function rather than val().
$('#from li').on('click', function(){
$('#from-text').text("from " + $(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text("to " + $(this).text());
});
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