Develop Reference

Dropdown Toggle working only for alternative buttons and not all buttons

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>

How to set dropdown button text based on selected option?

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>

Bootstrap drop down event

How to select the value with event of li element?
<div class="btn-group" role="group">
<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
Select <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropDownId">
</ul>
</div>
i fill it dynamically
for(var i = 0; i < data.stuff.length; i++){
$("#dropDownId").append("<li><a data-value='"+i+"'>"+data.stuff[i].name+"</a></li>")
}
How to get the values in li elements?
I have tried different versions but nothing worked.

Hope this helps. You need to attach click event to the a tag of the dropdown and display the selected text in a span having selected ID.
$('#dropDownId a').click(function () {
$('#selected').text($(this).text());
});
$(function () {
for (var i = 0; i < 10; i++) {
$("#dropDownId").append("<li><a data-value='" + i + "'>" + i + "</a></li>")
}
$('#dropDownId a').click(function () {
$('#selected').text($(this).text());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="btn-group" role="group">
<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
<span id="selected">Select</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropDownId">
</ul>
</div>
</div>

for(var i = 0; i < 4; i++){
$("#tmplDropDown").append("<li><a data-value='"+i+"'>test</a></li>")
}
<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="btn-group" role="group">
<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
Select <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="tmplDropDown">
</ul>
</div>

Need to switch/remove class with siblings selector

I have two buttons, when I click any of one the function add the class "selected" but if I push the other button the two buttons keep the same class, I used the siblings selector but don't works correctly, ¿can you help me please?
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected');
$('.btn-group').siblings('a.btn-switch-view-selected').removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true"></i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true"></i>
</a>
</div>

You already have the anchor in this, now target the sibling anchors, and remove the class
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected')
.siblings()
.removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true">Button</i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true">Button</i>
</a>
</div>

$('.btn-group').siblings('a.btn-switch-view-selected')
is supposed to be
$(this).siblings('a.btn-switch-view-selected')
as you are trying to target siblings of .btn-switch-view (which is the element that is clicked) and not .btn-group

Select all buttons except one with jQuery -2

I have this code :
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.
Currently I have tried to achieve this by following code.
$('#filters').not('#sort').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button:not("#sort")', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
Can you help me ?
Any help in this would be greatly appreciated.

Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)
Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.
The following click event will work on all the buttons except #sort.
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

Use $("#filters *").not("#sort") selector.
Please check below snippet for more understanding.
$("#filters button").on("click",function(){
$("#filters *").not("#sort").removeClass('active');
$(this).not("#sort").addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

You could use a css :not selector like this:
$("#filters button:not('#sort')")