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>
Related
I have implemented the nav bar and how to show the selected options first using javascript
function getoptions(){
var x =document.getElementById("languagelist");
var y = document.getElementById("language");
y.innerHTML= // set the selected language
}
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="getoptions()">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>
This pure javascript solution would work for you. run and test
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="dropdown">
<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>
</body>
<script>
function clickButton() {
document.getElementById("languagelist").click();
}
function clickItem() {
var element = document.getElementById("languagelist");
for (var i = 0; i < element.children.length; i++) {
(function(index) {
element.children[i].onclick = function() {
var thetext = element.getElementsByTagName('a')[index].innerHTML;
// var thehref = element.getElementsByTagName('a')[index].href; get the href here once you hosted, for testing I will use the name
var buttonelement = document.getElementById("language");
buttonelement.innerText = thetext;
window.open("/"+thetext);
}
})(i);
}
}
</script>
</html>
hope this will help to someone. cheers!
You can use this code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
alert($(this).data('value'));
});
Add data attribute and identify the element,
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" >
<a class="dropdown-item" data-value="/en" href="/en">English</a>
<a class="dropdown-item" data-value="/fr" href="/fr">French</a>
</div>
</div>
</nav>
script like this,
remove element and add as first item
$(".dropdown-item").click(function () {
var value = $(this).data('value');
var innerHtmlValue = $(this).html();
$('.dropdown-item').filter('[data-value="' + value + '"]').remove();
$('#languagelist a:eq(0)').before("<a class='dropdown-item' data-value='" + value + "' href='/en'>" + innerHtmlValue + "</a>");
});
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 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
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>");
});
});