$(".dropdown-menu a").click(function() {
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">Zone</button>
<div class="dropdown-menu" aria-labelledby="zone">
<a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a>
<a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a>
<a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a>
<a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a>
</div>
</div>
I am listing zone name in drop down but I need to display abbreviate name of zone.
Here is the html code I used:
<div id="zone" class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-secondary" data-toggle="dropdown">zone</button>
<div class="dropdown-menu" aria-labelledby="zone">
<a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a>
<a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a>
<a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a>
<a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a>
</div>
</div>
Javascript code used to display selected in button. Here is the code I used:
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
var currentBtn = $(this).closest(".btn-group").children("button");
var currentUnit = currentBtn.data("unit");
currentBtn.html(selText);
console.log(currentUnit);
$("."+ currentUnit).text(selText);
});
How can I list data-tz-abbrev in drop down instead of displaying america/chicago in drop down?
You need to set the dropdown item's text on the click event of the zone button.
$(".dropdown-menu a").click(function() {
var selText = $(this).text();
var currentBtn = $(this).closest(".btn-group").children("button");
var currentUnit = currentBtn.data("unit");
currentBtn.html(selText);
console.log(currentUnit);
$("." + currentUnit).text(selText);
});
$("#zone button").click(function() {
$(".dropdown-item").each(function() {
$(this).text($(this).attr('data-tz-abbrev')); // Set the option text using data-tz-abbrev attribute.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zone" class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-secondary" data- toggle="dropdown">zone</button>
<div class="dropdown-menu" aria-labelledby="zone">
<a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a>
<a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a>
<a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a>
<a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a>
</div>
</div>
Related
How can I append the value of the dropdowm menu item in the text "Sorted by"?
I want to show in the button text something like this:
Sorted by: Highest positive votes or Sorted by: Alphabetic according to the dropdown item selected.
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By</span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
If the selected dropdown option is marked by a selected="true" attribute, for example, you can get it like so:
$("#dropdownMenuButton span").html("Sorted By " + $('dropdown-menu[aria-labelledby="dropdownMenuLink"] a.dropdown-item[selected="true"]').text());
Please keep in mind that this will not be triggered on an event click. To do it on an event click:
$("div.dropdown-menu a.dropdown-item").click(function(e){
$("#dropdownMenuButton span").html("Sorted By " + $(this).text()); // gets the selection text and puts it in the button
$(this).parent().find("a.dropdown-item[selected=true]").attr("selected", null); // unselects previous selections
$(this).attr("selected", "true"); // selects the current one
});
This attaches a listener to all anchor elements with a class dropdown-item that are children to any div with a dropdown-menu class.
something like this with jquery:
$('.dropdown-menu a').onClick(function () {
var text = $(this).text();
$('#dropdownMenuButton span').text( "Sorted By: " + text);
});
You can try following
Add an element that will show the sorted by text
Add click event listeners
document.querySelectorAll(".dropdown-item").forEach((el) => {
el.onclick = (ev) => document.getElementById("sorted-by").textContent = ev.currentTarget.textContent;
});
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span id="sorted-by"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
You can do something like this. All you need to do is add a span with the class .option to your html and this small part of jquery which checks for when you click on your dropdown and adds said elements text to your button:
$('.dropdown-item').click(function() { // When dropdown is clicked:
$(".option").text($(this).text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span class="option"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a><br/>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a><br />
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a><br />
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
I am trying to a birthday input for my form which will contain three dropdown menus. The first one will have day, then month, and then year.
<div class="dropdown" style="position:inline-block">
<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 class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
That is the code for one dropdown menu from the bootstrap website.
Have a look on below code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<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>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<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>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<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>
</div>
</div>
may it helps you.
You can use btn-group class to make your button menu side by side.
<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="btn-group">
<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 class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<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 class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<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 class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
The button which should unhide the dropdown menu actually hides the dropdown button instead. Also, I have one more dropdown menu in this navigation and it works perfectly fine.
<div class="side-nav pull-right">
<div class="dropdown">
<button type="button" class="profile dropdown-toggle" data-toggle="dropdown" id = "dropdownMenuButton" aria-haspopup="true" aria-expanded="false">Bonjour Arthur K. <img src = "images/triangle.png" alt =""/> </button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuButton">
Utilisateurs
Snippets
Traductions
</div>
</div>
Mon compete
</div>
check this working example.. for more read this
<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.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<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 class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
I have a dropdown with search functionality. I'd like to be able to search "Category" for example, and see objects that I designate to said category. Currently everything is hidden (except the category you search for) if there are no results, unless the group/category name is included in the <li>.
My code (here is the JSFiddle which loads cleaner, for some reason):
$("#search-criteria").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".dropdown-item").each(function() {
var s = $(this).text().toLowerCase();
$(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
.search-box {
margin: 10px;
}
.scrollable-menu {
height: auto;
max-height: 500px;
overflow-x: hidden;
}
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Components
</button>
<div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<li class="row search-box">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
</li>
<a class="dropdown-item" href="#">Component 1</a>
<a class="dropdown-item" href="#">Component 2</a>
<a class="dropdown-item" href="#">Component 3</a>
<h6 class="dropdown-header dropdown-item">Category</h6>
<a class="dropdown-item" href="#">Component In C</a>
<a class="dropdown-item" href="#">Component 2 In C</a>
<h6 class="dropdown-header dropdown-item">Category 2</h6>
<a class="dropdown-item" href="#">Component In C2</a>
<a class="dropdown-item" href="#">Component 2 In C2</a>
</div>
</div>
Separate everything out more, have each header in it's own section and nest the items underneath that. Then when you have scope on search where this refers to the desired h6, you can hide/show all children elements of that by class,
$(this).children('.dropdown-item').show();
or something similar.
I wound up adding a span with the category name to each of my child items. Kind of round about and I'd love to see what others can come up with that's better, but for now this new code works. Try typing test in to see what I mean.
Old Code:
$("#search-criteria").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".dropdown-item").each(function() {
var s = $(this).text().toLowerCase();
$(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
.search-box {
margin: 10px;
}
.scrollable-menu {
height: auto;
max-height: 500px;
overflow-x: hidden;
}
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Components
</button>
<div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<li class="row search-box">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
</li>
<a class="dropdown-item" href="#">Component 1</a>
<a class="dropdown-item" href="#">Component 2</a>
<a class="dropdown-item" href="#">Component 3</a>
<h6 class="dropdown-header dropdown-item">Category</h6>
<a class="dropdown-item" href="#">Component In C</a>
<a class="dropdown-item" href="#">Component 2 In C</a>
<h6 class="dropdown-header dropdown-item">Category 2</h6>
<a class="dropdown-item" href="#">Component In C2</a>
<a class="dropdown-item" href="#">Component 2 In C2</a>
</div>
</div>
Doing a basic example but the bootstrap style won't apply to the button coming from the React component. It does apply to the button within the HTML file. I have provided the bootstrap css from the CDN in the HTML file. Running on a simple python web server (python -m http.server 8001). What gives?
example1.jsx:
// example1.jsx:
var MyPulldown = React.createClass({
render: function () {
return <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Second Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
}
});
React.render(
<div>
<MyPulldown/>
</div>,
document.getElementById('container')
);
example1.html
<!-- example1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!-- The core React library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx" src="example1.jsx"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
First Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id='container' class="form-group">
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
In react class prop is reserved. You need to use className
className
To specify a CSS class, use the className attribute. This applies to
all regular DOM and SVG elements like <div>, <a>, and others.
var MyPulldown = React.createClass({
render: function () {
return <div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Second Dropdown
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</div>
}
});