I am trying to follow bootstrap button drop down , but not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div class="dropdown" style="display: block;">
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Edit:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Components Tutorial</title>
</head>
<body>
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
</body>
</html>
Aside from the missing > if not a typo, you are not including the dropdown button to toggle the menu.
e.g.
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
So putting that on your current code:
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Example Fiddle
Related
I have a bootstrap code for the search bar with a dropdown list but I want to display the option upon selection one from the dropdown list. Currently, it shows "All" and even you click on the dropdown and select any of the options it does not work. Anyone on it using JavaScript or jQuery to make it work
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
You could simple add click event on
dropdown-item
see below
$('.dropdown-menu .dropdown-item').click(function(){
var value = $(this).text();
console.log(value)
// Update the value and show it to the user
$(this).parent().parent().find(".dropdown-toggle").html(value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
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 a problem with the following code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="valeur">Texte</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Changer le texte
</li>
</ul>
</div>
<script>
function lafonction() {
document.getElementById('valeur').innerHTML = 'Nouveau texte';
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
When I select an option from the dropdown menu, the values are changed but the dropdown menu disappears both visually and in the source code.
Thank you in advance for your help !
You need to link bootstrap at your project
for more informations about bootstrap dropdown, I suggest you this site (with working examples) :
https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
<!DOCTYPE html>
<html>
<head>
<!--BEGIN BOOTSTRAP-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!--END BOOTSTRAP-->
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="valeur">Texte</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Changer le texte</li>
</ul>
</div>
</body>
</html>
<script>
function lafonction() {
document.getElementById('valeur').innerHTML='Nouveau texte';
}
</script>
trying to do dropdown with angularJS and bootsrap by guide, but id doesnt work though :) Here is my code:
I dont know, maybe its just old tutorial that i use, but thats all i found by now.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="dropdown">
<div class="dropdown">
<button type="button" class="btn btn-danger">Menu</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-model="dd.data.multipleSelect">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="a in subjects"><a ng-click="dropboxitemselected(a)">{{a}}</a><li>
</li>
</ul>
</div>
</body>
</html>
var app = angular.module ('app', []);
app.controller('dropdown', function ($scope) {
$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
$scope.selectedItem;
$scope.dropboxitemselected = function (item) {
$scope.selectedItem = item;
alert($scope.selectedItem);
};
});
The bootstrap dropdown example says to wrap everything in a <div class="dropdown">. It doesn't work if you don't...
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
I am having some trouble with a dropdown menu with bootstrap. I have browsed around the other questions on here and not found an answer that is working for me. Here is the HTML head
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>
I made careful note to link to JQuery before bootstrap.js
Here is the code for the button. This markup is taken pretty much exactly from the bootstrap 3 docs
<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
Then of course, the script to call the dropdown.
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
If anyone could help me figure out what I'm missing here I would really appreciate it. Thanks!
You need to wrap the entire dropdown menu with an element that has the .dropdown class
You also need to remove .pull-right from the button and apply it to .dropdown
<div class="dropdown pull-right">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
</div>
Example: http://jsfiddle.net/52VtD/404/