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());
})
Related
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'
}
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>
Below is my html example
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
below is my jquery
$(document).ready(() => {
$('.dropdown-menu a').click(() => {
var change = $(this).attr('id');
$('.dropdown-item .'+change).show();
$('.dropdown-item .'+change).siblings().hide();
});
});
What i am looking to do is hide all elements on page load and only show certain elemnts when menu item is clicked while making all other elements outside that div go back to being hidden.
You can find the contents you want to show, exclude them from a selection of all items, and hide what's left. You'll also want to specify that you only want to trigger the event on dropdown-toggle class as well:
$(document).ready(() => {
$('a.dropdown-toggle').click(function () {
var mine = $(this).siblings().children(".dropdown-item");
$('.dropdown-item').not(mine).hide();
mine.show();
});
});
.dropdown-item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
</li>
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown02" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Foobar</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
</li>
</ul>
You have several issues in your code:
You are missing to add dropdown01 class in the anchor element with class dropdown-item. You need to add that class.
After adding the class your selector will be $('.dropdown-item.' + change) since both the class is in the same element so there will be no space between the class selector.
You can use $('.dropdown-item').hide(); before showing the elements. This will hide all the elements of that class first and show only the elements of the clicked menu in the next line.
You need to define a css where it hides all the elements with class .dropdown-item on page load.
$(document).ready(() => {
$('.dropdown-toggle').click(function() {
var change = $(this).attr('id');
$('.dropdown-item').hide();
$('.dropdown-item.' + change).show();
});
});
.dropdown-item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data- toggle="dropdown" aria-haspopup="true" aria- expanded="false">Menu1</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item dropdown01" href="#mission" class="mission">Mission</a>
<a class="dropdown-item dropdown01" href="#contact" class="contact">Contact</a>
<a class="dropdown-item dropdown01" href="#portfolio" class="portfolio">Portfolio</a>
</div>
</li>
<li>
<a class="nav-link dropdown-toggle " id="dropdown02" data- toggle="dropdown" aria-haspopup="true" aria- expanded="false">Menu2</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item dropdown02" href="#mission" class="mission">Mission 2</a>
<a class="dropdown-item dropdown02" href="#contact" class="contact">Contact 2</a>
<a class="dropdown-item dropdown02" href="#portfolio" class="portfolio">Portfolio 2</a>
</div>
</li>
Is there a way to specify that a button acts as both a dropdown trigger AND a tooltip source?
I've been able to get it to do one or the other, but not both. My code below works as a dropdown, but if I reposition the data-toggle="dropdown" to before the one for tooltip, then it renders a tooltip instead:
<button class="btn btn-sm dropdown-toggle"
data-toggle="tooltip" data-toggle="dropdown"
data-placement="bottom"
title="Test Tooltip">
You can initialize the tooltip through any attribute, id or class to avoid crossover with dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
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>
$('[data-toggle-second="tooltip"]').tooltip();
https://www.codeply.com/go/aFEQgHs1sC
In such cases I find it easiest to simply put the label of the button within a span that has the tooltip itself
<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
<span data-toggle="tooltip" title="Test Tooltip">
Button label
<span>
</button>
This way the button has the toggle action for the click event (including on the label) but the label has the tooltip event, and the two data-toggle attributes are on different elements so don't clash.
You could try making something like this where you have the button as data-toggle="tooltip" And add a dropdown
<ul class="nav navbar-nav">
<li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >
<a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
</ul>
</li>
</ul>
$('#example').tooltip();
http://jsfiddle.net/h56xw8wq/67/
Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>
I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps
You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.