We Keep Coding

Changing menu name after selecting item with bootstrap menu

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

Bootstrap button dropdown child element's class is getting removed when clicked on other button's dropdown items

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>

Pass unordered List selected item to ASP.NET Web Forms using jQuery

I asked a question earlier but didn't phrase it correctly.
I am working with jQuery and Bootstrap for pretty much the first time and need some help.
I have an .aspx webpage that has this code:
<form method="POST" action="Search.aspx">
<div>
<input type="text" class="form-control" name="srchterm" id="srchterm" style="width: 300px" />
<button id="Submit" class="btn btn-primary" type="submit">
GO!</button>
</div>
<br />
<div>
<div class="btn-group">
<a id="reportType" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#"
name="rptType">Select report type<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">All</li>
<li id="2">Some</li>
<li id="3">None</li>
</ul>
</div>
<div class="btn-group">
<a id="reportStatus" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
Report Status<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">Active</li>
<li id="2">Archived</li>
<li id="3">All</li>
</ul>
</div>
</div>
</div>
</form>
What I would like to know is how I can pass the value of the selected unordered list item to the code behind using JQuery or AJAX. Neither method I know much (or to be totally honest) anything about.
When I hit the submit button it takes the text box value and passes that back to Request.Form("srchTerm") but i cant seem to get anything else to pass.
I have seen this link here at fiddle but cant seem to get it to work for me.
I am wondering if its because how I have declared my listbox, but do need help in order to get this to work.
If I am missing a tag, please let me know. But I would very much appreciate the help with the JavaScript to get this wired up to pass the data so I can call the information from my database.
====================================
edit 1
I've tried various methods, none of which i have kept, but this is that i have right now and cant get anything to pass a value across.
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
$('.reportType li').click(function () {
value1 = $(this).attr('value');
});
$('.reportStatus li').click(function () {
value2 = $(this).attr('value');
});
$('#Submit').click(function () {
alert('value1 = ' + value1 + ' | value2 = ' + value2);
});

If you must have dropdown list and you want to maintain this type of functionality, then i'd simply use hidden input fields something like this:
<div class="btn-group">
<input type="hidden" id="reportStatus" name="reportStatus" />
<a class="btn btn-default dropdown-toggle btn-select"
data-toggle="dropdown" href="#">
Report Status
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li data-val="1">Active</li>
<li data-val="2">Archived</li>
<li data-val="3">All</li>
</ul>
</div>
JS will be something like:
//$(function () {
// $("#reportStatus").parents("div").find("li").click(function () {
// value = $(this).attr("data-val");
// $("#reportStatus").val(value);
// })
//});
//or something more general:
$(function () {
$(".btn-group").each(function (index, item) {
myInput = $(item).children("input");
$(item).find("li").click(function () {
value = $(this).attr("data-val");
myInput.val(value);
});
});
});
fiddle here

i did not understand how can i use AlloyUI dropdown script

i did not understand how can i use AlloyUI dropdown script. i have write this code 5 time on my same page.
<div id="myDropdown" class="dropdown">
<button id="myTrigger" class="btn btn-default dropdown-toggle" type="button">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
</ul>
</div>
in this html have same classes and id, and i use this script. i take this code from alloy. follow this http://alloyui.com/examples/dropdown/
YUI().use(
'aui-dropdown',
function(Y) {
new Y.Dropdown(
{
boundingBox: '#myDropdown',
trigger: '#myTrigger'
}
).render();
}
);
i have 5 dropdown on my same page with same html code. when i run this code my first drop down is working and other is not working.

Bootstrap Dropdown + Angular data-ng-repeat

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!