I am trying to update the content of .help-block dynamically with using jQuery but not sure why I am not able to target the .help-block I know that we can simply use $('.help-block').text(.... but as I said I need to do this through jQuery Traversing mechanism like using following find() or next() and first() but none of them did the job!
$(function(){
$(".dropdown-menu li a").click(function(){
$("#selector").find('.help-block').html($(this).text());
$("#selector").next('.help-block').html($(this).text());
$("#selector").parent().find('.help-block').html($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="new-cu-emailinput"></label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="selector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please Select From the List<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button>
<ul class="dropdown-menu" aria-labelledby="selector">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<span class="help-block pull-right"></span>
</div>
</div>
</div>
Can you please let me know what I am doing wrong?
Your selectors are wrong. Try like following.
$("#selector").closest('.dropdown').next('.help-block').html($(this).text());
Related
I have task to create dependency of options selected in first dropdown to "filter" options in second dropdown.
For this I've already create "value" in li tag which is acquired from the backend side. FE side is created of buttons and ul, il tags due to some css options etc.
Logic of selection is:
when I choose in first dropdown option1 in the second dropdown should appear only v1.0, when option2 is selected there should be latest and v2.0 etc.
I would like to have code as much easy as possible.
This is my existing HTML page:
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="1"><a rel="name1">option1</a></li>
<li value="2"><a rel="name1">option2</a></li>
<li value="3"><a rel="name1">option3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="2"><a rel="tag">latest</a></li>
<li value="2"><a rel="tag">v2.0</a></li>
<li value="1"><a rel="tag">v1.0</a></li>
... // more options ...
</ul>
</div>
I've started the JS with:
$('.dropdown-menu li a[rel=name1]').on('click',function() {
var value = $(this).parents('li').val()
With this I'm able to get the value from items in first dropdown but I'm lost how to continue and filter options in the second dropdown. Thank you for any help!
Unless you have a href on the a it is useless - you do not even get a little hand.
Also .val() is reserved for form field which are the only object that can have a value and be valid
Instead use data-attr on the LI itself and give each ul a class
$('#firstSel>li').on('click',function() {
var value = $(this).attr("data-value");
$("#secondSel").find("li").hide()
$("#secondSel").find("li[data-value="+value+"]").show();
});
.dropdown-menu>li { cursor: pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="firstSel">
<li data-value="1">option1</li>
<li data-value="2">option2</li>
<li data-value="3">option3</li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="secondSel">
<li data-value="2">latest</li>
<li data-value="2">v2.0</li>
<li data-value="1">v1.0</li>
</ul>
I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>
I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/
I want to insert custom element(not a simple link ) to drop down.
Here is my code:
<div class="container">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">
<div style="display:block">
<span>Action</span>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i></button>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i></button>
</div>
</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</ul>
</div>
</div>
I faced problem, that I cannot align label of Item like another ones.
Maybe someone can give me a helping hand to make strings in drop down aligned.
Here is a picture what I get:
I use angular, bootstrap and bootstrap-UI.
Fiddle link: http://jsfiddle.net/dJDHd/1165/
Should be a simple addition to your custom CSS file:
.dropdown-menu > li > div {
padding: 0 20px;
}
Demo
Demo 2 (Fork of OP's code - thanks Manoj Kumar)
I am slightly new to web development and I am trying to teach myself. I am trying to make a searchbar with a dropdown, so far I have made it but I have a problem with the last button, it will be used as the search button. It doesnt fix on the left hand side, it just floats under the bar.
<div class="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn"><span class="fa-search"></span></button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<button type="button" class="btn-search"><span class="fa-search">
</div><!-- /input-group -->
</span></button>
</div><!-- ...search -->
This is how you would do a search with a dropdown- you are almost there.. just move the input after the ul
<div class="col-lg-5">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
link to demo
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());
});