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>
Related
I am trying to create a dropdown using Bootstrap with several options but when I click the button nothing comes down to select the option. Not sure what is going on.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="SelectOS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select option...</button>
<div class="dropdown-menu" aria-labelledby="SelectOS">
<a class="dropdown-item" href="#">Linux</a>
<a class="dropdown-item" href="#">Mac</a>
<a class="dropdown-item" href="#">Windows</a>
</div>
</div>
</body>
</html>
Use the data-bs-toggle attribute instead of the data-toggle attribute.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="SelectOS" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select option...</button>
<div class="dropdown-menu" aria-labelledby="SelectOS">
<a class="dropdown-item" href="#">Linux</a>
<a class="dropdown-item" href="#">Mac</a>
<a class="dropdown-item" href="#">Windows</a>
</div>
</div>
</body>
</html>
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 got bootstrap dropdown but need some change and dont know how to do this,
This is start position : BUTTON TO OPEN LIST
and when i click on this button, i need this action : Action
So when i click on button list will slide down, and this Add to list will change with NEW list title(button)
This is my bootstrap codee for list:
<head>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<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>
Try with data-placement="top" which helps you out
The Popover Plugin
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
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/