How to add label in bootstrap multiselect? - javascript

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

Related

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>

Javascript to change the text of the button

I am a very new to Javascript. now I have a dropdown list within django.
---Select a status---
ALL
Expired
Pending
if I select give "ALL" as an example, it would navigate to "/all/" page, this is the correct behavior, but how can I change the text to "ALL" ?
<div id="dropdown1" class="dropdown filter" >
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="placeholder">---Select A Status---</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="active" href={{ view_all }}>All</a></li>
<li><a class="" href={{ view_exipred }}>Expired</a></li>
<li><a class="" href={{ view_pending }}>Pending</a></li>
<li class="divider"></li>
</ul>
</div>
Sorry for the incorrect edit.above are the code here.

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>

Bootstrap dropdown not working properly

Please find the jsFiddle below. I am trying to implement a simple Bootstrap dropdown button, but I am not able to achieve it.
Can someone please let me know what am i missing.
html
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<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>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
JS
$('.dropdown-toggle').dropdown();
$('#dropdownMenu1').dropdown('toggle');
Please find the fiddle link below:
http://jsfiddle.net/rohan2911/BVZ6G/
Your fiddle needed jQuery:
http://jsfiddle.net/isherwood/BVZ6G/1
Uncaught Error: Bootstrap requires jQuery bootstrap.min.js:6
Uncaught ReferenceError: $ is not defined

Categories