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>
Related
This question already has answers here:
get wrong value in data attribute jquery
(4 answers)
Closed 2 years ago.
As you can see on click i change data-id on button .dropdown-toggle if you check in browser inspect element menu you will see data-id is change everytime when you click different a element but console.log show everytime same data-id, any ideas why this and how to fix it ?
$(document).on('click', '.dropdown-menu a', function(){
var id = $(this).data('id');
$('.dropdown-toggle').html($(this).text() +'<span class="caret"></span>');
$('.dropdown-toggle').attr('data-id', ''+id+'');
console.log($('.dropdown-toggle').data('id'));
})
$('ul li').on('click', function(){
var id = $('.dropdown-toggle').data('id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-id="1" class="dropdown-item" href="#">Action</a>
<a data-id="2" class="dropdown-item" href="#">Another action</a>
<a data-id="3" class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
You can simply use jQuery data() method to set the id value:
$(document).on('click', '.dropdown-menu a', function() {
var id = $(this).data('id');
$('.dropdown-toggle').html($(this).text() + '<span class="caret"></span>');
$('.dropdown-toggle').data('id', id);
console.log($('.dropdown-toggle').data('id'));
})
$('ul li').on('click', function() {
var id = $('.dropdown-toggle').data('id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-id="1" class="dropdown-item" href="#">Action</a>
<a data-id="2" class="dropdown-item" href="#">Another action</a>
<a data-id="3" class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
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'm trying to make a simple sign in program for use in a podium at my office. All that this program is responsible for is allowing clients to put in their name, username, description of their problem, and click submit. this information will then get put into a CSV.
This all works fine, however the Bootstrap 4 dropdown menu I have included is always stuck open. It defaults to expanded when the page loads, and remains open regardless of clicking the button or not.
My code is almost exactly the same as the example code shown on Bootstraps site:
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="display: block">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>
And here are my imports:
<script src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
EDIT: This issue seems to only exist within the Electron/Node.JS enviornment. running my html/css within chrome (by launching the index.html file) works as expected and does not show any errors in the developer console.
"the Bootstrap 4 dropdown menu I have included is always stuck open"
The dropdown remains "open" because it has inline style "style:display:block". Remove this and follow the normal dropdown structure...
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/ViKYGOigbL
You have to import bootstraps.bundle.js, too. Otherwise it will not toggle:
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
take note that you're importing jquery before importing boottsraps js-file
You also have to remove style="display: block" from your dropdown-menu. This display: block; is the reason why your menu stucks in expanded position.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<!-- imported jquery, bootstraps css and bootstraps bundle.js -->
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- removed style="display: block;" -->
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>
I have markup for twitter bootstrap dropdown like below
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
Now, added click event in dropdown using jquery as below
$('.dropdown-menu a').click(function () {
alert("Hi")
});
My click event is working but, I am not able to update the selected value in dropdown. How to do it?
$('.dropdown-menu a').click(function () {
$('button').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
use $('button').text($(this).text()); to set value to button.
try this
$('.dropdown-menu a').click(function () {
$('button[data-toggle="dropdown"]').text($(this).text());
});
DEMO HERE
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