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
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>
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.
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
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>
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