There are many answers in stackoverflow about how to get the selected value of a bootstrap dropdown
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control"></input>
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
I have no problem with that using
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
})
but after that I need to make a HTTP request with several values, and one of this is the index of the selected item of the dropdown '0' for 'A', '1' for 'B' and '2' for 'C'
How can I get the index of the selected item?
If you're sending the request outside of click handler scope, you can set a variable with a null value and update it on .click()
var selected_index = null;
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
selected_index = $(this).closest('li').index();
});
// ... HTTP request code with selected_index
try this,
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
var clicked_li_index = $("#demolist li").index( $(this).parent()) );
alert(clicked_li_index);
});
try using .index() , also you can remove the additional </input> in ur code
You can use jQuery's index() method to do that.
.index()
Search for a given element from among the matched elements.
Here is an example
var $dropDownItems = $('.dropdown').find('.dropdown-menu').children();
$dropDownItems.on('click', function() {
console.log('index: ', $dropDownItems.index(this), 'text: ', this.textContent)
})
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<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>
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Related
when I click on "press me" span text , I need to get "fold2" text() value. I tried to add lot of jquery traverse methods in my script, but I can't find the perfect one.
Because of my <li> including lot of <span> tag available.
HTMl Code:
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
JS Code
// when click on "press me" text I need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr=$(this).closet().find('a').text();
alert(tr);//Expecting output is "fold2"
});
});
Working Code
https://jsfiddle.net/atg5m6ym/383/
Via jQuery, simplest way would be (if for some reason there's really no way to put class on your target):
$('.trashcan').on('click', function(e) {
var prev = $(this).prev();
if (prev.length)
{
alert( prev.text() );
}
});
In this case, the code only works if the target is just before the source element.
Another is, assuming your target has a class of .target:
$('.trashcan').on('click', function(e) {
var parent = $(this).closest('.favdelParentFold');
if (parent.length)
{
alert( parent.find('.target').text() );
}
});
Better to have the class so you can move around your target and the code would still work.
Please use it like this: ( Tested )
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr = $(this).prev().text();
alert(tr);//Expecting output is "fold2"
});
});
I have added a class for text - press me text as pressMe. Please find the working jsfiddle. The code is as below:
HTML
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan pressMe">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true"></ul>
</li>
JS
$(document).ready(function () {
$(".pressMe").click(function () {
alert($(this).prev().text());//Expecting output is "fold2"
});
});
Try this.
If you want to get the "fold2" text, you can set click event for span.trashcan alone. On this click event you can get that value by using prev("span").
// when click on "press me" class i need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold > .trashcan").click(function() {
var tr = $(this).prev('span').text();
alert(tr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
Hope you are expecting this...
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
What I want to do is:
Select drop-down-list drp0 first and then select drp1.
When you select drp1, if drp0 has no value selected, alert("Please select Leave Type Dropdown first").
Then set drp1 to default value and set focus on drp0.
These are my two dropdowns:
<div class="col-sm-6">
<label>Select Leave Type</label>
<div class="dropdown">
<i class="dropdown-arrow dropdown-arrow-inverse"></i>
<button class="btn btn0 btn-default dropdown-toggle" type="button" id="menu0" data-toggle="dropdown">
--Select--
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-inverse0" role="menu" aria-labelledby="menu0" id="drp0">
<li role="presentation"><a data-myAttribute0="casual" class="list0" href="#">Casual Leave</a></li>
<li role="presentation"><a data-myAttribute0="annual" class="list0" href="#">Annual Leave</a></li>
<li role="presentation"><a data-myAttribute0="medical" class="list0" href="#">Medical Leave</a></li>
</ul>
</div>
</div>
<div class="col-sm-6">
<label>Select Employee Name</label>
<div class="dropdown">
<i class="dropdown-arrow dropdown-arrow-inverse"></i>
<button class="btn btn1 btn-default dropdown-toggle hide-button" type="button" id="menu1" data-toggle="dropdown">
--Select--
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-inverse1" role="menu" aria-labelledby="menu1" id="drp1">
<c:forEach items="${personList}" var="person">
<li role="presentation"><a data-myAttribute1="${person.getId()}" class="list1" href="#">${person.getName()}</a></li>
</c:forEach>
</ul>
</div>
</div>
The second dropdown is populating pretty well. No problem in that.
Actually I found a way to check is dropdown1 is selected or not, While selecting dropdown2? But the problem is when dropdown1 has selected value I get this undefined error alert?
Looks like its not taking the current value of dropdown1.
Here is my code.
<script>
$(document).ready(function () {
$('.dropdown-inverse1 li > a').click(function () {
var $person_id = $(this).attr("data-myAttribute1");
var $leave_type = $(this).attr("data-myAttribute0");
if (typeof $leave_type === 'undefined') {
alert("Empty");
} else {
alert("Not Empty");
}
});
});
</script>
My problem is I get "Empty" alert whether dropdown1 has a value or not. How to fix this? Thank you.
Here is the DEMO and most simplified and better version for your solution:
$('.dropdown-inverse1 li > a').click(function () {
$(".btn1").html($(this).text() + ' <span class="caret"></span>');
});
$('.dropdown-inverse2 li > a').click(function (e) {
var s = $(".btn1").text().trim();
if(s=="Button1"){
alert("Empty");
$(".btn2").html('Button2 <span class="caret"></span>');
setTimeout(function(){
$(".btn1").trigger('click');
},100); //set a timeout of 100ms to trigger the click so as to open the required dropdown
return;
}
$(".btn2").html($(this).text() + ' <span class="caret"></span>');
});
You had some problems in your solution like once you select dropdown the caret i.e. arrow used to get replaced since you were replacing text of .btn1. Now it will replace with caret and content as html. Hope it helps.
$(document).ready(function () {
var $leave_type = "";
$('.dropdown-inverse0 li > a').click(function () {
$leave_type = $(this).attr("data-myAttribute0");
if (typeof $leave_type === 'undefined') {
alert("Empty");
} else {
alert("Not Empty");
}
});
$('.dropdown-inverse1 li > a').click(function () {
var $person_id = $(this).attr("data-myAttribute1");
if (typeof $leave_type === 'undefined') {
if (typeof $person_id === 'undefined') {
alert($leave_type);
} else {
alert("Not Empty");
}
}else{
$('#menu0').trigger('click');
alert("Please select Leave Type");
}
});
});
Heeeyyyy try thiss......
Hi Lots of kind people tried to help me. Thank you for that. As they say best thing is to use bootstrap select but I wanted to use ul li bootstrap dropdown. So if any one interested in that. I found this.
$('document').ready(function () {
$('.dropdown-inverse1 li > a').click(function () {
$(".btn1").text($(this).text());
});
$('.dropdown-inverse2 li > a').click(function () {
$(".btn2").text($(this).text());
var s = $(".btn1").text();
if(!(s=='HTML' || s=='CSS' || s=='JavaScript') ){
alert("Empty");
}
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn1 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button1
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-inverse1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<br/>
<div class="dropdown">
<button class="btn btn2 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button2
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-inverse2">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
</body>
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!
Here is my div :
<div id="myDiv">The
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span>
way to receive congrats
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> to give a correct answer.</div>
I would like to get this text : "The best way to receive congrats are to give a correct answer."
So I call $('#myDiv').text(). It does not work since I get the two elements in ul.dropdown-menu.
The next step is to filter or remove the un-wanted children, i.e.:
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
I tried to play with $.filter or $.not or $.children with jquery selectors, etc. I cannot find the correct way to do this. Need help!
You can find some code in jsfiddle : http://jsfiddle.net/Ku7FY/
[EDIT]
One solution suggests this code :
$('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')
If several div.btn-group exists, just loop as :
var result = $('#myDiv').text();
$(".btn-group").each(function() {
result = result.replace($(this).text(),"");
});
$('#result').append(result).append('<br />')
So, if I get this straight, you want to exclude the list from the .text(). Try something like:
$('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')
If you don't mind placing all the "dumb" text in spans, then you can do it very simply by only grabbing "dumb" text spans and ".cordial-err-corr" spans (and a find()).
<div class="well" id="myDiv"><span class="cordial-content">The </span>
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span>
<span class="cordial-content">way to receive congrats </span>
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> <span class="cordial-content">to give a correct answer. </span></div>
and
$('#myDiv').find('.cordial-err-corr,.cordial-content').text()
Demo: Fiddle
I have an ugly, though simple enough (I guess) method:
We can make a copy, then remove the dom elements we don't want to display. Then we can get the desired text.
var clone_div = $('#myDiv').clone();
clone_div.find('.btn-group').remove();
$('#result').append(clone_div.text()).append('<br />');
Here is jsfiddle. http://jsfiddle.net/Ku7FY/4/
Try
function process(el){
var array = [];
$(el).contents().each(function(){
var $this = $(this), text;
if(this.nodeType == 3){
text = $.trim($this.text());
if(text){
array.push(text)
}
} else if($this.is(':not(.btn-group)')){
Array.prototype.push.apply(array, process(this))
}
})
return array;
}
console.log(process($('#myDiv')).join(' '))
Demo: Fiddle