We Keep Coding

Problems with multi level bootstrap dropdown

As you can see in my snippet; the dropdowns show vertically downwards. Here are my queries.
How do I make my sub menu show to left or right rather than vertically downwards?
As of now this menu is disappear only if I click on the caret sign again. This can be tiresome from UX perspective. So I added the three commented lines that will make it dropdown disappear when clicked anywhere in documented; But on subsequent clicks the dropdown wont work. I know why it wont work but I cant find a way around.
Also multi level dropdowns are bringing an extra layer of complication i.e if it was just one dropdown we can show and hide as we wish. Since there are multiple dropdowns, the code just hides/unhides haphazardly.
Please suggest a way forward.
PS: Kindly provide a solution with bootstrap 3 and not 4.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
//document.addEventListener("click", function () {
// $('.dropdown-menu:visible').addClass('hide');
// });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

I modified a few css properties on your dropdown menu, first I set top:0; so that the dropdown would appear at the top of the parent element. Then I set left:25%; this would make the dropdown menu appear a few spaces on the left of the parent element.
For the subsequent dropdowns, I set left:100%; so that they would appear on the right of the parent dropdown.
Instead of adding the class 'hide' everytime you want to close it, modify its css instead;
$('.dropdown-menu:visible').css('display','none');
I also added a code wherein it would hide all the other submenus if the clicked element isn't inside a multilevel dropdown.
Run the snippet;
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
// the parent dropdown-submenu which is a li tag
var clickedDropdown = $(this).parent();
// the parent of the li tag which is a ul tag
var parentDropdown = $(this).parent().parent();
if (!parentDropdown.hasClass("multi-level")) {
// if the clicked element has a parent dropdown, hide all other submenus
$(".dropdown-menu").each(function() {
if ($(this).parent()[0] != clickedDropdown[0]) {
$(this).css("display", "none");
}
});
}
e.stopPropagation();
e.preventDefault();
});
document.addEventListener("click", function() {
$('.dropdown-menu:visible').css('display', 'none');
});
.dropdown-menu {
left: 25% !important;
top: 0 !important;
}
.dropdown-menu .dropdown-menu {
left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

send dropdwon selected list item in form data to the server

How to send the selected dropdown list item to the server along with the form data on pressing submit button?
html
<span class="dropdown" >
<button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" >
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
</ul>
</span>

The easy way is create a input hidden, then pass value of dropdown option to it! See my code:
<html>
<head>
<title>12328354/calling-a-particular-php-function-on-form-submit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" action="stacksubmit.html">
<span class="dropdown" >
<button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" name="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
</ul>
<input type="hidden" name="optionvalue" id="optionvalue">
</span>
<input type="submit" value="click">
</form>
<script>
$('.dropdown-menu a').click(function(){
$('#optionvalue').val($(this).text());
});
</script>
</body>
</html>

How to add label in bootstrap multiselect?

whether we have any option here to show the image as default.
Code:
<select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple">
<option value="1">test</option>
<option value="2">test1</option>
<option value="3">test2 </option>
</select>
$('.multiselect-selected-text').text('Options');
Here instead of options i want to show the Image as default.
Sample Image:

You would just add the glyphicon within the button.
<span class="glyphicon glyphicon-pencil"></span>
Full example:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">
<span class="glyphicon glyphicon-pencil"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
</ul>
</div>
JSFiddle
Furthermore you can use jQuery to dynamically add such elements.
var span = $('<span></span>');
span.addClass('glyphicon');
span.addClass('glyphicon-pencil');
$('#foo').html(span);

Answer Found:
I just added this.
$('.multiselect-selected-text').addClass('fa fa-check-square-o fa-6');
Thanks

Trivial JavaScript / Bootstrap dropdown issue

Basically what I have is 3 dropdown menus, and I need only one to be active, so that when I choose something from it, the rest should become active as well. So what I've done so far is I've added the disabled class and now I have the first one active, while the rest 3 - disabled. My question is - how to make them active as soon as I choose something from the first dropdown
$(document).ready(function () {
$('#Test #firstId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #secondId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #thirdId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #fourthId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
});
And here are my dropdowns:
<div class="btn-group" id="firstId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Store
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="secondId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Catalog
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="thirdId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Categories
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="fourthId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Products
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>

JQUERY
$('#firstId ul.dropdown-menu li').on('click',function(){
$('.btn.btn-default.dropdown-toggle.disabled').removeClass('disabled');
});
on firstId select find all classes with disabled and remove class disabled
JSFIDDLE DEMO

Dropdown menu in table cell

I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?

The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>