Bootstrap: Multiple select fields inside one - javascript

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>

Related

Select2 dropdown- scrollbar isn't available

I am using Select2 for all my dropdown inputs, and applied the minimumResultsForSearch for 10 entries.
The list is of course scrollable, However, it doesn't seem to show any scrollbar (arrows) which may be misleading (some might think the items are just cut off).
I couldn't find any information regarding a scrollbar in the documentation.
Anybody has an idea how to add one?
With the basic of select2 there is no issue with the scroll-bar.
The issue will be somewhere in your CSS codding. You need to provide code to make use able to search for your issue.
Basic Select2 Example (first: no search field and second: search field)
$('#first').select2({
minimumResultsForSearch: 10
});
$('#second').select2({
minimumResultsForSearch: 10
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<div style="padding: 50px;">
<div> 6 options available > No search bar (scroll works)</div>
<select id="first" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
</select>
<div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
<select id="second" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
<option value="SP">Spain</option>
<option value="IT">Italy</option>
<option value="CH">China</option>
<option value="RU">Rusia</option>
<option value="LUX">Luxembourg</option>
</select>
</div>

jquery for the drop-down select

Here is my index file code. whenever I select something into the drop-down then show me related dropdown.
I put this code in my file but I can't get drop down after selecting the main type.
css file code is .hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Your problem is type class=" hide" change to class="hide"
and you need move your script to before close body tag not head tag.
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
.hide{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>

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.

select2 bootstrap sizing issue

I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html
<div class="select2-container col-md-11">
<select class="form-control s2" id="complaint" multiple="multiple" name=
"complaint[]">
<option value="bad_breath">
Bad Breath
</option>
<option value="bleeding_gum">
Bleeding Gum
</option>
<option value="swollen_gum">
Swollen Gum
</option>
<option value="gum_pain">
Gum Pain
</option>
<option value="loose_teeth">
Loose Teeth
</option>
<option value="sensitive_teeth">
Sensitive Teeth
</option>
<option value="darkened_teeth">
Darkened Teeth
</option>
<option value="damaged_teeth">
Damaged Teeth
</option>
</select>
</div>
The JS
<script type="text/javascript">
$(".s2").select2({
closeOnSelect: false
});
$(document).ready(function() {});
Full code here http://www.codeply.com/go/Ly1UHW2HT2
First Add in your select box : <select data-width="100%"></select>
Add This JS and CSS in you header :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
to fix the layout (widths not correct) you need to wrap the contents in a form-group:
<div class="form-group">
<label class="col-md-1 control-label" for="select">Label</label>
<div class="select2-container col-md-11">
<select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
</select>
</div>
</div>
Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.

SelectBoxIt - Multiple selects on page (dynamic)

I have a page that has to have multiple select boxes if needed. I'm using this plugin to style the selectbox.
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});
This is my javascript that I "clone" the selectbox and add it after it.
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<select id="title" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<a href="javascript:false;" class="add_option add_title">
<img src="<?=base_url();?>assets/img/add_options.png" alt="" />
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
It does "clone" itselfs, but the select is not functional.
How should I do it to add multiple selects through javascript?
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});
You need to use
$('.add_title_option').after($('.selectContainer select').clone().show());
Insted of
$('.add_title_option').after($('.add_title_option .controls').html());
In order to clone it, and set display from none to show.
Then you have to transform your select box with .selectBoxIt()
To customize it with this plugin.
Also, I have removed the id from select box to be sure we will not have dublicated ids.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
$(".titleSelect").selectBoxIt();
$('body').on('click', '#dublicateButton', function() {
$('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());
});
});
</script>
</head>
<body>
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<div class="selectContainer" >
<select class="titleSelect" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
</div>
<a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
click
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
</body>
</html>

Categories