Here I have a dropdown button where it has following three list in dropdown. When I click the list in the dropdown it has to replace the name with the list name in the dropdown. Help me out with the issue. Thanks in advance. Heres the fiddle link https://jsfiddle.net/e8bny3kv/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
Try this
`$('.dropdown-item').click(function() {
$('.dropdown-toggle').html($(this).html());
});`
Maybe you want something like this:
document.querySelector('.dropdown>button').addEventListener('click',function(e){
e.currentTarget.innerText = 'focused';
});
You can use this
JS fiddle
$('.dropdown-item').click(function(){
$(this).parent().parent().parent().find('.dropdown-toggle').html(($(this).text()))
})
You can do this using simple Javascript -
Try this fiddle - https://jsfiddle.net/z1qbfgcp/1/
let dropDownItem = document.querySelectorAll('.dropdown-item')
dropDownItem.forEach(item => {
item.addEventListener('click', function(){
this.closest('.dropdown').children[0].innerText = this.innerText
})
})
$(".dropdown-menu a").click(function() {
$("button").text($(this).text());
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
You can use CSS for this, just delete the "Dropdown button" text and use the ::before pseudo-element to make the text change in the different states.
.dropdown.show .dropdown-toggle::before{
content:'Dropdown button: open'
}
.dropdown-toggle::before{
content:'Dropdown button: close'
}
Related
I want to replace a text test with a select bootstrap when I click to the text and I want do this with jquery.
Here my html :
<text class="TextDb" style="text-decoration:underline;color:blue;cursor:pointer">Test</text>
Here the select bootstrap that i want add it in the code jquery :
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Here's a solution with Bootstrap 4.3 and jQuery 3.3.1
I'm making some assumptions here but it does literally what you asked.
https://codepen.io/anon/pen/aXGjww
<text class="TextDb" style="text-decoration:underline;color:blue;cursor:pointer">Test</text>
<div class="dropdown d-none">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
// Shorthand for $( document ).ready()
$(function() {
$('.TextDb').on('click', function() {
$(this).hide();
$('.dropdown').removeClass('d-none');
});
});
Try the following code
$("#yourdropdownid").on("change",function(e){
$("#yourtextid").val( $("#yourdropdownid option:selected").text());
})
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>
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>
$(".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>
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>