I have 2 Bootstrap dropdown menus where you can select an item:
<div class="btn-group onderdeelnaam">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="onderdeel1"></button>
<ul class="dropdown-menu">
<li>onderdeel1-1</li>
<li>onderdeel1-2</li>
</ul>
</div>
<div class="btn-group onderdeelnaam">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="onderdeel2"></button>
<ul class="dropdown-menu" id="dropdown1">
<li>onderdeel2</li>
</ul>
</div>
When I click an li item the following script gets triggered and changes both the boxes to the same name.
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
$("button").append("<span class='caret'>");
});
});
So it doesn't matter which one I select, both the dropdown menus get the same name of the item I selected. I have tried to experiment with the last script to make the change happen to only 1 of the menus, for example I've tried to change the .dropdown-menu class to the id, but without success.
You need to amend your code to use the this keyword to reference the element which was clicked. From there you can use closest() and find() to retrieve the related button element. Try this:
$(".dropdown-menu li a").click(function() {
$(this).closest('.btn-group').find('.btn').text($(this).text()).append("<span class='caret'>");
});
Working example
Related
I'm getting desperate about fixing a problem I am facing. With a button I open a dropdown menu. I want to get the value of what I selected (better: the index of what I selected, the "position") when I select something in the onClick function and update my HighChart with the function updateChartDataByCourse(position) with it as a parameter. The function works fine. The page uses jsp. My code is the following:
creating button and dropdownmenu:
<div class="dropdown" style="display: inline-block; margin-right: 10px">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Kurs auswählen:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu" id="course" onclick="enableLFields()">
<li class="dropdown-header">Kursliste</li>
<li><c:forEach items="${teachersCourses}" var="course"><a href="#">
<option value="${course.id}">${course.name}</option>
</a></c:forEach></li>
</ul>
</div>
and then the onClick-function:
$("#course li a").click(function(){
$("#dropdownMenu1:first-child").text("Kurs: " + $(this).text());
$("#dropdownMenu1:first-child").val($(this).text());
indexOrIdThatShallBePassed = $("#dropdownMenu1").val();
updateChartDataByCourse(**indexOrIdThatSallBePassed**);
var dropdown = $("#dropdownMenu1");
console says this index is undefined. I don't get it!
To get the value of the clicked item, you could do something like that:
$(this).find('option').attr('value')
Then you would have your indexOrIdThatShallBePassed variable set.
Here is the fiddle.
What I am trying to do is use Bootstrap's drop-down menu instead of select boxes and utilize list items instead of option. The data that is being retrieved from selected list item and put into its corresponding button element is given a class of 'active-select' on a click event (shown in blue after it renders). Like this:
<li><a href="#" class="active-select">New York<a><li>
Clicking on other list item should remove the above mentioned class from other list items only within the corresponding button element. But the class is being removed from the selected list item from other button drop-down group as well. Like this:
<li><a href="#" class>New York<a><li>
Can anyone please help?
The problem occurs because you are using parents instead of parent:
This line of code is the problem:
thisEl.parents('li').siblings().find('a').removeClass('active-select'); // parents targets all li's above `a` and hence siblings afterwards targets other drop-downs.
Instead use parent like this:
thisEl.parent('li').siblings().find('a').removeClass('active-select');
Full working code
(function () {
var search_btn = $('.select-style').find('button.btn-inverse'),
selectOptions = $('.select-style ul.dropdown-menu li').find('a');
selectOptions.on('click', function (e) {
e.preventDefault();
var thisEl = $(this);
var getTextData = thisEl.text();
thisEl.addClass('active-select');
// Use .parent and not .parents
thisEl.parent('li').siblings().find('a').removeClass('active-select');
thisEl.parents('.btn-group').find('button[type=button]').html( getTextData );
});
}) ();
ul.homeInputBaropenState { list-style-type: none; width: 500px; }
ul.homeInputBaropenState li { display: inline; }
ul.homeInputBaropenState li a.active-select { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="select-Section homeInputBaropenState">
<li class="select-style">
<div class="btn-group">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City
</button>
<ul class="dropdown-menu">
<li>New York</li>
<li>San Fransisco</li>
<li>Los Angeles</li>
<li>Detroit</li>
</ul>
</div>
</li>
<li class="select-style">
<div class="btn-group">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Type
</button>
<ul class="dropdown-menu">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</div>
</li>
<div class="clearfix"></div>
</ul>
I have a Bootstrap single-button dropdown and I would like to click on one of the options appearing in the dropdown using Protractor. How do I accomplish this?
<div class="btn-group" ng-if="!persist.edit" dropdown>
<button type="button"
class="btn btn-default"
dropdown-toggle>
<span translate="GENERAL.ACTIONS"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Check In -->
<li role="presentation">
<a ng-click="checkIn()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_IN">
</a>
</li>
<!-- Check Out -->
<li role="presentation"">
<a ng-click="checkOut()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"
translate-value-length="1">
</a>
</li>
</ul>
</div>
I tried this (dropdown is called, but click fails):
it('Should click Actions button and show dropdown', function(){
element(by.buttonText("Actions")).click();
browser.sleep(1000);
});
it('Should click the Check Item Out dropdown option and change status to checked out', function(){
element(by.css('[value="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"]')).click();
});
First, click the "dropdown toggle" button to open up the dropdown. Then, select an option:
var dropDown = element(by.css("div[dropdown]"));
dropDown.element(by.css("button[dropdown-toggle]")).click();
dropDown.element(by.css("a[ng-click*=checkIn]")).click(); // Check In
Working code:
element(by.buttonText("Actions")).click();
element(by.css('[ng-click="]checkIn()"]')).click(); // Check In
A clean solution to select from Bootstrap Dropdown is to click by buttonText and then by linkText:
element(by.buttonText('your button')).click();
element(by.linkText('your selection')).click();
Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?
I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
First Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
Second Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<script type="text/javascript">
// Hide backdrop from #firstDropdown.
// This can be done with JS as below. Can it be done with only CSS?
$('#firstDropdown').on('show.bs.dropdown', function () {
$(".dropdown-backdrop").hide();
});
</script>
Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none; in CSS works fine, as in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.
See JSFiddle updated.
I'm having a little issue while trying to show some data (Villains/Villanos) in a drop down with a ng-repeat. I've been looking around and trying but I can't make it work. I have the following HTML:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
<script>
// This function lets the dropdown button save the name of the Villain that it's selected.
$(function(){
$(".dropdown-menu li a").click(function(){
$(".dropdown-toggle:first-child").text($(this).text());
$(".dropdown-toggle:first-child").val($(this).text());
});
});
</script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle dropdown-suspects-sides" type="button" id="dropdownMenu1" data-toggle="dropdown">
Suspects
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="suspect" role="presentation" data-ng-repeat = "villain in villains">
<a role="menuitem" tabindex="-1" href="#">
<span class="glyphicon glyphicon-user"></span> {{villain}}
</a>
</li>
</ul>
</div>
/* Controllers */
...
$scope.getVillains = function() {
$http.get("/getVillains")
.success(function(data) {
$scope.villains = data
}
)
};
...
As you can see, I'm trying to make a dropdown to show all the Villains I have. The items appear correctly if they're showed in a normal list so the items can be "used", but they're not appearing if I try to show them this way. I'm pretty sure I'm doing something wrong here but I can't guess what is it. Thanks in advance!