The code below populates the first dropdown with distinct pants brands:
$.each(pantsBrands, function(i){
var li = $('<li>')
.appendTo(pantsList);
var aaa = $('<a>')
.text(pantsBrands[i])
.attr('onclick','askPantStyle()')
.appendTo(li);
});
In this next bit of code, I intend to somehow use the selection above to populate the contents in a second dropdown box composed of the styles relevant to the brand chosen in the first.
var askPantStyle = function(){
$('#pantStyleDiv').slideDown();
alert($(this).text());
}
I used the alert to check to see what (this) would return. I had hoped it would be the text content of the first selection, but when the alert box appears, the content is empty.
relevant html below:
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
Added a quick example below of how you could solve this. Bootstrap dropdowns are quite specific in their usage, so I'm using a click event rather than change that is the normal event for selects.
$('#dropPants').on('click', 'li a', function() { ... });
Also I did not add any data-attributes, as I do not have the full picture of your solution. But I hope you can use this to make things work like you want them to.
You did not provide any data, so I created an array for the brands, and an object for the styles. Each brand has a property in the object containing an array of styles.
var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = {
'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
Anyway, below is a working example of a Bootstrap dropdown populating another dropdown:
var pantsBrands = ['levis','lee','lindeberg'];
var pantsStyles = { 'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
$.each(pantsBrands, function(i) {
$('#dropPants').append('<li>'+pantsBrands[i]+'</li>');
});
$('#dropPants').on('click', 'li a', function() {
$('#dropPantStyle').html('');
var showStyles = pantsStyles[$(this).text()];
$.each(showStyles, function(i) {
$('#dropPantStyle').append('<li>'+showStyles[i]+'</li>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
Related
I have multiple dropdown buttons with the same class as they were dynamically added to the page. I want to toggle the dropdown on the clicked button and not all.
I am using closest() and find() to do that, but this works only alternatively and not for every button.
For example if I click button 1 it works and not for button 2 and it again works for button 3 and not button 4 and it goes on with dynamic buttons.
$('.btn').click(function() {
$(this).closest('div').find('.dropdown-content').toggleClass('show');
});
.dropdown-content { display: none; }
.dropdown-content.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
I want to have an accordion inside my dropdown menu. However, when clicking on the accordion to open/close it, the entire dropdown collapses. Instead, I want the dropdown to remain open and the accordion to open/close freely.
Check out a demo here
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
There seem to be many similar questions out there but I cannot find the right solution. A lot of answers suggest using jQuery to solve this issue. Is there a way to do it without?
I believe using data-boundary or data-parent may be the way to do this but I can't figure out how.
You can achieve this by adding an onclick event to the button that prevents the click from propagating down to the dropdown. Then you need to manually handle adding the relevant collapse or collapse.show classes to the accordion content in the onclick function like so:
function toggleAccordion(event) {
event.stopPropagation();
var collapsable = document.getElementById('collapseOne');
var classList = collapsable.classList;
if(classList.contains('collapse')) {
classList.replace('collapse', 'collapse.show');
} else if (classList.contains('collapse.show')) {
classList.replace('collapse.show', 'collapse');
}
}
and the HTML with the click event added:
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" onclick="toggleAccordion(event)">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
I altered your JSFiddle to show a working solution and you can find it here. Another note, I had to change the JS load type to No wrap - bottom of <head/body> to make this work.
Whilst #Jake has given a valid answer, I found a "hack" of some sorts that lets this work without writing any additional JS.
Simply replace the accordion div with a form tag.
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<form id="accordion">
<div id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible Test
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
<button class="dropdown-item" type="button">Test</button>
</div>
</div>
</form>
</div>
</div>
Unfortunately, I don't know why this works so I am unable to put the reason in the answer.
I have the following in an HTML form:
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
How do I set the name of the button to the value selected from the dropdown menu? I think I need to register an event handler on the button ("userNamesActionButton") and call a function, but how does that function have to look like? I've been unsuccessful so far, but am admittedly not a pro on Jquery, so looking for help here
Thanks!
You can do something like:
You should consider reading jQuery, as it's too much easy for a newbie too.
I have noticed you are using bootstrap, if you want caret without modifying dom, then do as like below.
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('#userNamesActionButton').html($(this).text()+' <span class="caret"></span>');
});
.input-group{
margin: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
If you can modify dom then change these:
DOM From
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
TO:
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
<span class="action-btn-text"></span> <span class="caret"></span>
</button>
And change js to:
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('.action-btn-text').text($(this).text());
});
How do I set the name of the button to the value selected from the dropdown menu?
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
<script>
function changeButtonText(value){
document.getElementById('userNamesActionButton').innerText = value;
}
</script>
</span>
</div>
I have tries to position the items like:
so the markup after my change is here
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll col-4">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#/">Home</a>
<a class="navbar-brand" href="#/report">Report</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="searchBox col-4" [collapse]="isCollapsed">
<form class="navbar-form search">
<div class="form-group">
<!--</typeahead>-->
<input [(ngModel)]="country"
[typeahead]="countries"
autocomplete="off"
(typeaheadOnSelect)="countrySelected($event)"
class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedSearchType.name}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let type of searchType; let i = index;" role="menuitem">
<a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" (click)="loadFromSheet()">
<span class="glyphicon glyphicon-paste"></span>
Load from sheet
</button>
</div>
</div>
</div>
But it seems like this:
How can I fix this so the "load" button is to the right most?
You can try changing the col-md-4 to col-md-3 or less and manipulate the spacing between the buttons with margin-left property on the Load button. You are probably pushing the button to the next row, so check the paddings and margins on the CSS properties surrounding the other elements if not finding success.
Hope this helps.
I have following code for search bar where there is a Drop down list which I have developed on button and a text field to type search query.
On button click I am retrieving text using
document.getElementById('').value;
But how can fetch selected text of drop down button?
My code :
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
It looks like you're using Bootstrap. Bootstrap components often require jQuery. Use jQuery to bind a click handler to each of the dropdown items you want to retrieve a value from, in this case the <a> tags.
You can store that value in a variable and retrieve it when the search button is click.
(function(window, document, $, undefined) {
var dropdownValue;
/* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
$('.dropdown-menu a').each(function(i, item) {
/* Add click handler to each one, whenever one is clicked the
dropdownValue variable is updated with it's value */
$(this).on('click', function(e) {
dropdownValue = this.innerText;
});
});
/* Retrieve dropdown value */
$('#apply').on('click', function(e) {
alert(dropdownValue);
});
}(window, window.document, jQuery));
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches
</li>
<li>Ties
</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Another way would be to apply a class to the selected <a> tag and query for that when the search button is clicked so you don't have to create a variable and update it.