I am trying to implement a dropdown time selector using Bootstrap:
HTML
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
Javascript
$('#from li').on('click', function(){
$('#from-text').val($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').val($(this).text());
});
I am trying to select the time and then update the dropdown value to represent that time. Using the above code, when I click the dropdown value, it does not indeed update the text. No errors were found in the console either.
Attach the event on <a> element.
JavaScript:
$('#from li a').on('click', function(){
$('#datebox').text($(this).text());
});
$('#to li a').on('click', function(){
$('#datebox').text($(this).text());
});
You can have two dropdowns in different .btn-group divs.
HTML:
<div class="btn-group">
<a id="from-text" class="btn btn-default">From</a>
<a
data-target="#"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span
class="caret">
</span>
</a>
<ul id="from" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
<div class="btn-group">
<a id="to-text" class="btn btn-default">To</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu">
<li>10:00 AM</li>
</ul>
</div>
If you want to replace the text inside an element, use text(newText).
$('#from-text').text($(this).text());
Missing the ID for the element in your HTML. Where ever you want to add the value for datebox give it an id="datebox"
but right now your code is going to update the same box value so you might want to change the id names so one is getting the value from "From" and the other to "TO"
If you want to entirely replace the text use the text() function rather than val().
$('#from li').on('click', function(){
$('#from-text').text("from " + $(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text("to " + $(this).text());
});
Related
Been having some issues getting a Bootstrap button dropdown to toggle (making the list items and dropdown ul element visible) when another button is clicked. Here's what I have so far which doesn't seem to work (v3.3.7). I want the "testing" button to additionally toggle the "test" button dropdown.
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').dropdown('toggle')">testing</a>
You can use the custom attribute data-target to target the button group, so clicking on any element outside will trigger the dropping-down on the targeted button group.
<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target=".btn-group">
testing</a>
You should give your button group an id, so that the data-target is more specific.
Demo
Try .toggle('dropdown') instead of .dropdown('toggle'):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</a>
<ul id="test-dropdown" class="dropdown-menu">
<li>test</li>
</ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').toggle('dropdown')">testing</a>
<div class="input-group-btn search-panel" id="change-text">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept change-text-span">Select Location</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>
Odisha
</li>
</ul>
</div>
In the above code, I need to change the text of the span element on click of the a element. How can I do this?
Please Help.
Try this:
$("#change-text-a").click(function() {
$(".caret").text("SEt content here");
});
I'm using dropdown-menu from bootstrap and using jquery for changing the dropdown text on selection. The problem comes when a dropdown-menu is created dynamically using jquery it don't change the text of dropdown-menu on selection but it do change when the same action is performed on static html which is already present in HTML
below is the code..
<script>
$(document).ready(function(){
$(".btn-primary").on("click",function(){
var htmltxt='<div class="dropdown"><button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button><ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1"><li><a>Boolean</a></li><li><a>Character</a></li></ul></div>';
$("body").append(htmltxt);
});
});
$(".dropdown").ready(function(){
$(".dropdown-menu li a").on("click",function(){
var caret=' <span class="caret"></span>';
$($(this).closest(".dropdown").find("button")[0]).text($(this).text()).append(caret);
});
});
<body>
<div class="btn btn-primary"> Add DropDrop</div>
<br></br>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2">
<li><a>Boolean</a></li>
<li><a>Character</a></li>
</ul></div>
</body>
The first dropdowm-menu id="dropdownMenu2" works correctly but the second menu id="dropdownMenu2" which is appended from jquery (js variablehtmltxt) will to respond to the on() event.
Change:
$(".dropdown-menu li a").on("click",function(){
To:
$(document).on("click", ".dropdown-menu li a", function(){
I am using bootstrap dropDown html and I am trying to display the text of the selected item Note: I have a set of 3 dropDowns:
<ul id="filters" class="nav navbar-nav navbar-right">
<li class="option-combo dropdown Agency">
<a class="btn btn-default btn-lg dropdown-toggle">
Agency <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
<li><a class="btn btn-default btn-lg" href="#">All</a></li>
<li><a class="btn btn-default btn-lg selected" href="#filter-agency-TBWA">TBWA</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-agency-Ogilvy">Ogilvy</a></li>
</ul>
</li>
<li class="option-combo dropdown Client">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li>All</li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Sky" data-filter-value=".Sky">Sky</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-client-Vodafone" data-filter-value=".Vodafone">Vodafone</a></li>
</ul>
</li>
<li class="option-combo dropdown Year">
<a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Client <span class="caret"></span>
</a>
<ul class="filter option-set dropdown-menu">
<li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2013">2013</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2014">2014</a></li>
<li><a class="btn btn-default btn-lg" href="#filter-year-y2012">2012</a></li>
</ul>
</li>
</ul>
The jQuery I tried with no luck:
$('.filter').on('click', 'a', function() {
var $text = $(this).text();
$(this).prev(".dropdown-toggle").text($text);
});
This works, but it's ugly. Change:
$(this).prev(".dropdown-toggle").text($text);
to:
$(this).parent().parent().siblings(".dropdown-toggle").html($text + ' <span class="caret"></span>');
I'm sure there's a better way to do that, but since you're clicking on the <a> inside an <li> inside a <ul>, .parent().parent()siblings()... does the trick, as it will select the sibling of the <ul> that has a class of .dropdown-toggle, and change it's display text to that of the click <a> tag.
Hope that makes sense!
Edited to add the caret.
Bootply Example
This solution is cleaner than using parent() jquery because it finds the closest (traveling up the dom tree) class dropdown and then within that finds dropdown-toggle class (traveling down the tree). as long as your dropdowns all have class dropdown in the outer div and the dropdown-toggle in the inner div, it doesnt matter the order in which your html is structured:
$('.filter').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
hope this helps!
Here a clean way to do this: http://jsfiddle.net/4g01b2tb/2/
$('.filter').click(function (event) {
var targetText=event.target.text;
$(this).prev('.btn').text(targetText);
});
i have a html code like this:
<input type="text" class="form-control" id="txtCopyright" placeholder="IN" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
<li><a>IN</a></li>
<li><a>BEFORE</a></li>
<li><a>AFTER</a></li>
</ul>
</div>
Other input-group
<input type="text" class="form-control" id="txtOtherInput" placeholder="Other" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown2" role="menu">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
and i have a jQuery like this..
$('#myDropdown li').click(function () {
$('#txtCopyright').val($(this).text());
});
$('#myDropdown2 li').click(function () {
$('#txtOtherInput').val($(this).text());
});
It actually work in me.. but the problem is that i want to use only one jQuery in all my dropdown.. it is easy to use for now because i have only 2 dropdown what if i have 20 dropdown then i will set 20 jQuery's and I think it is redundant..
My idea is to pass the id of inputs but how to do that..
Any idea..
Please help me
Thank you.
Apply class selector and use data- attribute:
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" data-control-id="txtCopyright" role="menu">
<li><a>IN</a>
</li>
<li><a>BEFORE</a>
</li>
<li><a>AFTER</a>
</li>
</ul>
and on click of li use closest() or parent() to get parent ul and then fetch its data-control-id attribute value and then do like this:
$('.dropdown-menu li').click(function () {
$('#'+$(this).closest(".dropdown-menu").data("control-id")).val($(this).text());
});
or:
$('.dropdown-menu li').click(function () {
$('#'+$(this).parent(".dropdown-menu").data("control-id")).val($(this).text());
});
DEMO:
FIDDLE EXAMPLE
If all dropdown/ input pairings each are contained in a single parent wrapper the whole issue is fairly easy. Give the input's a common class. Then from the dropdown it is a simple traverse to main parent and look for input inside by class
<div class="module_wrap">
<input class="menu-input" type="text" class="form-control" id="txtCopyright" placeholder="IN" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
<li><a>IN</a>
</li>
<li><a>BEFORE</a>
</li>
<li><a>AFTER</a>
</li>
</ul>
</div>
</div>
JS
$('.dropdown-menu li').click(function () {
$(this).closest('.module_wrap').find('.menu-input').val($(this).text());
});