My form elements work with auto next focus except for first input. My first input has datalist and when I selected a list it's not going to focus next (datepicker) input. But if I start with second input my auto focus function is work very well how can I handle it? And I also shared on codepen
$(document).ready(function() {
$('.flexdatalist').flexdatalist({
minLength: 0,
searchContain: true,
}).on('select:flexdatalist', function() {
$('#checkin').focus();
});
var assignPicker = function(id, whenClosed) {
if (typeof whenClosed !== 'function') {
whenClosed = null;
}
return new Pikaday({
numberOfMonths: 2,
field: document.getElementById(id),
format: "DD.MM.YYYY",
minDate: new Date(),
firstDay: 1,
maxDate: new Date(2020, 12, 31),
onSelect: function() {
e = this.getDate();
},
onClose: whenClosed
});
}
assignPicker('checkin', function() {
$('#checkout').focus();
});
assignPicker('checkout', function() {
$('#select').focus();
});
});
body {
padding: 30px;
}
input,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" />
<link rel="stylesheet" href="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' />
<datalist id="languages">
<option value="PHP">PHP</option>
<option value="JavaScript">JavaScript</option>
<option value="Cobol">Cobol</option>
<option value="C#">C#</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Pascal">Pascal</option>
<option value="FORTRAN">FORTRAN</option>
<option value="Lisp">Lisp</option>
<option value="Swift">Swift</option>
<option value="ActionScript">ActionScript</option>
</datalist>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" class="checkin" id="checkin" />
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" class="checkout" id="checkout" />
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<select name="select" id="select">
<option value="0">Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>
<script src="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script>
</body>
</html>
Most of your code was ok after I dealt with all of the issues of loading files over http instead of https.
The core of this solution was in using onSelect inside of pickaday configuration, as opposed to onClose and defining your assignPicker function without var.
https://codepen.io/anon/pen/VPWaJo
Correct the input tags for datalist. like this :
<form action="" method="get">
<input list="languages" name="languages">
<datalist id="languages">
<option value="PHP">
<option value="JavaScript">
<option value="Cobol">
<option value="C#">
<option value="C++">
<option value="Java">
<option value="Pascal">
<option value="FORTRAN">
<option value="Lisp">
<option value="ActionScript">
</datalist>
</form>
Related
Currently, I have a dropdown list and 1-25 values in the dropdown.
The current one is I want to make a checkbox for those values instead of choosing multiple.
Is there any way to add a checkbox for those?
var mtf = document.getElementById('affectedwaferid').selectedOptions;
var affectedwf = Array.from(mtf).map(({ value }) => value);
//alert(affectedwf);
document.getElementById("selected-result").innerHTML = affectedwf;
<div id="afwid">
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</option>
<?php
//echo $cbo_oorigsite;
?>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</p>
</div>
What you want is a MultiSelect. You can implement it on your own as shown here, or you can import a library:
https://www.cssscript.com/multi-select-dropdown-picker/
Firstly, your question is not very clear.
Anyway, I think you want something like below to select the quatity.
Try below and amend as you required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<style>
h1 {
color: green;
}
.multipleSelection {
width: 300px;
background-color: #bcc2c1;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkBoxes {
display: none;
border: 1px #8df5e4 solid;
}
#checkBoxes label {
display: block;
}
#checkBoxes label:hover {
background-color: #4f615e;
}
</style>
<body>
<form>
<div class="multipleSelection">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select Quantity</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkBoxes">
<label for="first">
<input type="checkbox" id="first" class="chb" />
1
</label>
<label for="second">
<input type="checkbox" id="second" class="chb" />
2
</label>
<label for="third">
<input type="checkbox" id="third" class="chb" />
3
</label>
<label for="fourth">
<input type="checkbox" id="fourth" class="chb" />
4
</label>
</div>
</div>
</form>
<script>
let show = true
$('.chb').change(function () {
$('.chb').prop('checked', false)
$(this).prop('checked', true)
})
function showCheckboxes() {
if (show) {
$('#checkBoxes').hide()
show = false
} else {
$('#checkBoxes').show()
show = true
}
}
</script>
</body>
</html>
I want to make the same width of both select.
Mean I want both select width same irrespective of option value
I want to make the same width of both select.
Mean I want both select width same irrespective of option value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think it should be as simple as using CSS to set the width of the select elements in question:
select{ width: 16ch; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can modify your select element to have an explicit width: run snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<style type="text/css">
.form-select {
width:200px
}
</style>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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>
I'm using multiple select plugin on my page. Actually here the options which outside the optgroup are not adding on the field, when i check it. For instance, i have used these(pugal, Jino John) options outside the optgroup.
$('#exampleFormControlSelect2').multipleSelect({
filter: true,
selectAll: true,
selectAllText: 'Everyone in Project',
width: '100%'
});
.sub-options {
padding-left: 18px;
}
.ms-parent {
max-width: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group mt-5">
<select multiple class="" id="exampleFormControlSelect2">
<option value="pugal" class="options">Pugal</option>
<option value="jino" class="options">Jino John</option>
<optgroup label="Group 1" class="group-title">
<option value="1" class="sub-options">Pk Prabu</option>
<option value="2" class="sub-options">Gora Ramamoorthy</option>
</optgroup>
<optgroup label="Group 2" class="group-title">
<option value="11" class="sub-options">210</option>
<option value="12" class="sub-options">321</option>
</optgroup>
<optgroup label="Group 3" class="group-title">
<option value="20" class="sub-options">012</option>
<option value="21" class="sub-options">123</option>
</optgroup>
</select>
</div>
</div>
I solved this problem like that,
$('#exampleFormControlSelect2').multipleSelect({
filter: true,
selectAll: true,
selectAllText: 'Everyone in Project',
width: '100%'
});
.sub-options {
padding-left: 18px;
}
.ms-parent {
max-width: 300px;
}
.m-hidden{
visibility:hidden;
height:0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group mt-5">
<select multiple class="" id="exampleFormControlSelect2">
<optgroup label="pugal" class="group-title">
<option value="pugal" class="sub-options m-hidden" >Pugal</option>
</optgroup>
<optgroup label="jino" class="group-title">
<option value="jino" class="sub-options m-hidden" >Jino John</option>
</optgroup>
<optgroup label="Group 1" class="group-title">
<option value="1" class="sub-options">Pk Prabu</option>
<option value="2" class="sub-options">Gora Ramamoorthy</option>
</optgroup>
<optgroup label="Group 2" class="group-title">
<option value="11" class="sub-options">210</option>
<option value="12" class="sub-options">321</option>
</optgroup>
<optgroup label="Group 3" class="group-title">
<option value="20" class="sub-options">012</option>
<option value="21" class="sub-options">123</option>
</optgroup>
</select>
</div>
</div>
But,of course better solution can be offered
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>