I was trying to activate dropdown toggle button on the click of default button but by doing debigging i get to know that dropdown comes but it then disappears.
I am unable to recollect why is it happening?
I have put my code on http://jsfiddle.net/9r14uuLw/31/
<div class="row">
<div class="col-sm-4">
<!-- Button Group -->
<label><h5>Status</h5></label>
<div class="btn-group btn-group" >
<button type="button" class="btn btn-default" id = 'StatusBtn' onclick="clicktogglebutton()" >Select One</button>
<button type="button" class="btn btn-default dropdown-toggle" id = 'togglebtn1' data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Status 1</li>
<li>Status 2</li>
<li>Status 3</li>
</ul>
</div>
</div>
</div>
Please do loo at it and let me know , what may be the possible tweak i need in the code to make it work.
It would be preferable to use a standard <select> element for this role, as it's better both functionally and semantically.
However, if you're set on rolling your own, why have two buttons? Try condensing it to a single element:
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select One
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
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>
This is my code :
<div class="btn-group" data-toggle="dis-rclick" data-target="#rightclickAlert">
<button type="button" class="btn btn-info">Translator</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="label-info" style="display: none">
Edit
</li>
<li class="label-danger">
Disable
</li>
</ul>
When I open the drop down list and click on any item i don't get any response.
For example: When I click on Edit I want to reload page but that doesn't work.
Whats wrong?
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");
});
simple (and probably easy) my code is as follows
<div class="btn-group mod-group">
<button type="button" class="btn btn-default">Moderálás</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-toggle="button" class="publicBtn<?php echo ($s['public'] ? ' active' : '');?>"><a><i class="icon-eye-open"></i> Publikus</a></li>
</ul>
</div>
My question is how can I make the li with the data-toggle="button" work as a button would with a data-toggle="button" so how can I ask bootstrap to remove and add the active class to that li when clicked?
Also the question is not how to do this in js as It would be much nicer to accomplish this purely using the bootstrap api.
You just need to assign a role to the <li> element and then the data-toggle
DEMO http://jsfiddle.net/kevinPHPkevin/6KffS/108/
<ul>
<li role="button" class="btn" data-toggle="button">Button1</li>
</ul>