Bootstrap multiselect dropdown is not visible - javascript

Despite the fact that I can make this bootstrap-multiselect work in independent file, I'm not able to see the dropdown list once I click on caret, even if I included it in portal files.
I have already used bootstrap-datepicker, datetimepicker, chosen, and backbone.js
This is the line which is supposed to do the trick
$('.insightList').multiselect({
selectAllText: true
});
Does anyone have an idea of what can be the cause for not adding class 'open' for 'btn-group'?
![On click also there is only btn-group class for div whether it should add open class][1]
Thanks in advance

I've just created a jsbin to solve your problem Working demo.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<meta charset="utf-8">
<title>Example by #Bneiluj</title>
</head>
<body>
<select id="insightList" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<script id="example">
$('#insightList').multiselect({
enableClickableOptGroups: true
});
</script>
Please, let me know if you have any question.

Check the Occurrence of the
Bootstrap.js
Bootstrap-select.js
Bootstrap-multiselect.js
if one of them exist more then 1 times then the dropdown will not displayed

Make sure your HTML structure for the dropdown is as follows:
<select id="example-selectAllText" multiple="multiple" style="display: none;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div>
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});

This is the simple multi select am trying to build with the same bootstrap multiselect I have loaded all the necessary jquery and css but still it shows a select box displaying all the options it has not as proposed in above solution.
<select id="multi-select" name="field" multiple="multiple" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- initialize multiselect -->
<script>
$(document).ready(function() {
$('#mult-select').multiselect();
});
</script><!-- //ends-->

Related

Bootstrap: Multiple select fields inside one

I'm looking for a way to implement a custom select field that has a functionality of several select fields (each one has only one selectable entry). I didn't find any way to merge all the select fields into one, either nor way to allow one selection per form category.
Here is what I have
Here is what I am trying to achieve
Example of my current structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.table > tbody > tr > td {
text-align: center;
vertical-align:middle;
}
.col-xs-2 {
padding-top: 10%;
padding-left: 10%;
}
</style>
</head>
<body>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</body>
Update: I found a jQuery plugin that does this for you. It is called Bootstrap-select. Check it out here: https://silviomoreto.github.io/bootstrap-select/
This plugin converts a <select> into a Bootstrap Dropdown. One of its features is that you can have a <select multiple>...</select> with <optgroup>(explained below) and you can set the max number of selections per <optgroup> using a data-max-options attribute. So you can just set it to 1 for each <optgroup>. Here is the documentation for that feature: https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="container">
<select class="selectpicker" multiple>
<optgroup label="Color" data-max-options="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Style" data-max-options="1">
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</optgroup>
<optgroup label="Size" data-max-options="1">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 1:
I think you want to use <optgroup>s to contain multiple groups of <option>s into one <select>. And to make sure you can select more than one option, you need to add the multiple Boolean attribute to your <select>. However, you still need to make it so you can only select a maximum of one <option> per <optgroup>. The answer from this question provides a good piece of javascript code that does that.
Here is a demo that I put together. Hold Control on your keyboard to select multiple options. Notice that if you try to select another option from the same <optgroup>, the previous selection will be de-selected.
$('select optgroup option').click(function() {
$(this).siblings().prop('selected', false);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<select class="form-control" multiple style="width:200px;height:400px;">
<optgroup label="Color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</optgroup>
<optgroup label="Style">
<option>Square</option>
<option>Sphere</option>
</optgroup>
<optgroup label="Size">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 2
Here is a new solution that I created using Boostrap's Dropdowns. I created this one since the other solution isn't a dropdown so might not be what you are looking for. Let me know if it works for you.
$('.dropdown-menu li a').click(function() {
var groupId = $(this).attr('href');
$(groupId).val($(this).attr('data-sel'));
$(this).closest('.dropdown-menu').find('li a[href="'+groupId+'"]').removeClass('bg-success');
$(this).addClass('bg-success');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<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 class="dropdown-header">Color</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Style</li>
<li>Square</li>
<li>Sphere</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Size</li>
<li>Tiny</li>
<li>Smallest</li>
<li>Small</li>
<li>Medium</li>
<li>Big</li>
<li>Biggest</li>
<li>Huge</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</div>

materialize css select is not working properly

I am trying to use select field in materialize css. But it doesn't seems work properly
my code :
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
from http://materializecss.com/forms.html i have inspected where i founf this :
<div class="select-wrapper">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
and from my code i am getting this from inspect:
<div class="select-wrapper">
<span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
<select class="validate initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?
Fiddle : https://jsfiddle.net/007zkvut/
I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.
Here is the link:
https://jsfiddle.net/007zkvut/7/
It is working properly, just like in their website.
However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>
In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>
I have fixed the issues of select drop-down.
Please check the demo.
https://jsfiddle.net/007zkvut/9/
Your demo:
https://jsfiddle.net/007zkvut/8/
$(document).ready(function() {
$('select').material_select();
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field s6">
<select class="browser-default waves-effect waves-light btn">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.
setTimeout(function(){$('select').material_select();},1000);
This same trick will also work for the materialize datepicker. just do.
setTimeout(function(){$('.datepicker').pickadate();},2000)
Well you can use the following code:
<div class="input-field col s12 m6">
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
and, in your javascript file you need to put the next code:
(function($){
$(function(){
$(document).ready(function() {
$('select').material_select();
});
});
})(jQuery);
and ta chan!, it works.
Place the label after the select tag. It should do the trick.

Convert <select> into <ul>, but keep functionality

I want to convert "select" into "ul" list to be able to style it nicely. The way it works in my plugin, is when you select one of the "select" options you get another section loaded below it. So, I have managed to convert "select" into "ul" using jQuery, but when I click on an option from "li" list it doesn't load my content as per original "select" dropdown.
Is there a way to do it? I guess it's something to do with values?
Below is my code:
$(".jr-form-categories").append('<ul id="property-list"></ul>');
$(".jr-cat-select option").each(function(){
$("#property-list").append('<li>' + $(this).html() + '</li>');
});
$("#property-list").on("click", "li a", function(e){
e.preventDefault();
$(".jr-cat-select").val($(this).attr("href"));
});
Here is HTML:
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
And this is how the converted list looks like, which doesn't work when you click on of the links:
<ul id="property-list">
<li>- Select Category -</li>
<li> Flat</li>
<li> House</li>
<li> Shared Flat</li>
<li> Shared House</li>
<li> Studio</li>
</ul>
I believe you are looking for something like Select2. This can convert your <select> into <ul> and <li> and not only that, it also gives you options like autosuggest and other things.
If you wanna convert it back, use .select2("destroy"). Very simple.
$(function () {
$("select").select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
A demonstration to convert it back to <select>:
$(function () {
$("select").select2();
$("#remBtn").click(function () {
$("select").select2("destroy");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
<button id="remBtn">Remove</button>

Hidden value not working in Chosen

If I use combobox like this :
<select>
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option></select>
</select>
Hidden value working. Value three hidden.
But, I use Chosen like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<select class="chosen-select">
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option>
</select>
<script type="text/javascript">
$(".chosen-select").chosen();
</script>
Hidden value not working. Value three not hidden.
How do I get Chosen to hide an option with the hidden attribute set as in three?

Hiding/showing the select box options in jquery?

i have below code snippet in jsp
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e
with ids action1/action2 ) above options.
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will
work in cross browser.
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as #Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).
You could maybe approach it like:
markup
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();​​
See for example this jsfiddle
Not exactly ideal though!
You can not use div to group but you can assign class to options to group them.
Live Demo
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
$('.action1').hide();
$('.action2').show();​
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Categories