bootstrap drop down button aligns on the wrong side - javascript

When you click on the dropdown ul, the list items (<li>) are shown all the way to the left..
As you can see in my simplified jfiddle example:
http://jsfiddle.net/3bfvvkbh/
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});


The dropdown has be in a seperate btn-group.
See my updated fiddle and also the Bootstrap Docs - #Nested Button groups
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});
<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.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="btn-group">
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<button type="button" class="btn btn-info">random button</button>
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="yearlist" class="dropdown-menu" role="menu">
<li> <a>2010</a>
</li>
</ul>
</div>
</div>
</div>


Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right", Demo
<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
<li> <a>2010</a>
</li>
</ul>


Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.
<div class="btn-group">
Dropdown
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
http://jsfiddle.net/3bfvvkbh/2/


Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu
See: http://jsfiddle.net/3bfvvkbh/6/
$(document).ready(function () {
$(function () {
var append = function (txt) {
$("#yearlist").append('<li>' + txt + '</li>');
};
append("<a>2012</a>");
append("<a>2014</a>");
});
});

Related

show selected option in dropdown javascript

I have implemented the nav bar and how to show the selected options first using javascript
function getoptions(){
var x =document.getElementById("languagelist");
var y = document.getElementById("language");
y.innerHTML= // set the selected language
}
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="getoptions()">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>

This pure javascript solution would work for you. run and test
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="dropdown">
<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>
</body>
<script>
function clickButton() {
document.getElementById("languagelist").click();
}
function clickItem() {
var element = document.getElementById("languagelist");
for (var i = 0; i < element.children.length; i++) {
(function(index) {
element.children[i].onclick = function() {
var thetext = element.getElementsByTagName('a')[index].innerHTML;
// var thehref = element.getElementsByTagName('a')[index].href; get the href here once you hosted, for testing I will use the name
var buttonelement = document.getElementById("language");
buttonelement.innerText = thetext;
window.open("/"+thetext);
}
})(i);
}
}
</script>
</html>
hope this will help to someone. cheers!

You can use this code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
alert($(this).data('value'));
});

Add data attribute and identify the element,
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" >
<a class="dropdown-item" data-value="/en" href="/en">English</a>
<a class="dropdown-item" data-value="/fr" href="/fr">French</a>
</div>
</div>
</nav>
script like this,
remove element and add as first item
$(".dropdown-item").click(function () {
var value = $(this).data('value');
var innerHtmlValue = $(this).html();
$('.dropdown-item').filter('[data-value="' + value + '"]').remove();
$('#languagelist a:eq(0)').before("<a class='dropdown-item' data-value='" + value + "' href='/en'>" + innerHtmlValue + "</a>");
});

Selected value in drop down returning undefined in javascript

I'm trying to select a value from the drop down and pass the value in the JavaScript function. But in the JavaScript function i'm getting the value undefined. How can i resolve this?
Here goes the html
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu" onclick="dropDown_chooser()">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
and the javaScript
function dropDown_chooser() {
var select = document.getElementById("chooser");
var select_val = select.value;
console.log("select val" + select_val);
}

var dropdown = document.querySelectorAll('#chooser > li');
dropdown.forEach(function(item){
item.addEventListener('click',function(){
console.log(this.getAttribute('value'));
})
})
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>

I guess you are using bootstrap by looking at the classes you have used; you can go with the following code then
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">All</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="chooser" role="menu">
<li value="type">Type</li>
<li value="loc">Location</li>
<li value="name">Name</li>
<li value="sal">Salary</li>
</ul>
</div>
And using jQuery
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).parent('li').attr("value");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
console.log("select val = " + param);
});
});

As stated in the comments, this is not a dropdown menu ,using "select" and
"option" is the proper way and you should use "onchange" instead of "onclick".
I posted it, like this it works, hope this helps!
function getvalue(){
var skillsSelect = document.getElementById("chooser");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);
alert(selectedText);
}
<div class="input-group-btn search-panel">
<select class="dropdown-menu" id="chooser" role="menu"
onchange="getvalue()">
<option value="type"><a href="#">Type</option>
<option value="loc"><a href="#">Location</option>
<option value="name"><a href="#">Name</option>
<option value="sal"><a href="#">Salary</option>
</select>
</div>
.

Issue On Adding Slide Function on Bootstrap 3 Button Dropdown

Can you please take a look at This Demo and let me know why I am not able to add slide function to the Bootstrap 3 button dropdown?
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script>
$('.dropdown-toggle').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown-toggle').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
</script>
Thanks

All dropdown events are fired at the .dropdown-menu's parent element. link
You need to use
$('.btn-group').on('show.bs.dropdown', function() { ... });
See this fiddle.

Working Example
http://jsfiddle.net/br0jkp1u/6/
$('#example').on('click', function () {
$('ul.dropdown-menu').slideToggle();
});
<button id="example" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

Check in updated fiddle:http://jsfiddle.net/br0jkp1u/7/
[Fiddle][1]

.clone() and .remove() method in jquery

My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:
When I click on cross, then remove that line. My code is:
$(document).ready(function () {
$("button#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".glyphicon-remove").click(function () {
$(".abcd:last").remove();
});
});
html:
<div class="wrapper">
<div class="form-group abcd" id="abcde">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
</div>
</form>
<button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button>
<button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>
I am able to add New line by click on add button, but unable to hide that line by click on cross.
Note: remove only that line, which line cross button is selected.

First, you'll need to change your clone to that :
$(".abcd:last").clone(true).appendTo(".wrapper");
Passing true mean that it is cloning events as well.
Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :
$(".glyphicon-remove").click(function () {
$(this).closest(".abcd").remove();
});

Alternatively, you can bind the event to the container like this:
$(document).ready(function () {
$("button#add").click(function () {
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".wrapper").on('click', '.glyphicon-remove', function () {
$(".abcd:last").remove();
});
})

How can i add or append more then one dropdown [duplicate]

This question already has an answer here:
add previous functionality when click on add button(parent child concept in jquery) [closed]
(1 answer)
Closed 9 years ago.
My task is to add previous form when i click on add button.
When i click on Add button it will add all dropdown below each as shown in image.
And remove one line(means all 5 dropdown of one line).I am to do this functionality.
problem is:
how we can append or add one line each click on add button.
my coading is:
jQuery:
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
Html:
<div class="form-group">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>

Try using .clone() from jQuery lib and simply clone last element.
Clone manual here
EDIT:
The answer to this problem is in comments bellow ( jQuery on() function)

thank you I did this:
coading is:
$("#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
Refered link:
Cloning whole form elements after clicking button

Categories

Resources