bootstrap-select-dropdown
Version:
A jQuery plugin for Bootstrap 4 that converts <select> and <select multiselect> elements to dropdowns. Uses fuse.js for fuzzy search and Bootstrap's dropdown plugin.
633 lines (599 loc) • 23.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bundle.css">
<title>Bootstrap Select Dropdown</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container justify-content-between">
<a class="navbar-brand" href="#">Bootstrap Select Dropdown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<span class="navbar-text ml-auto">
</span>
<ul class="navbar-nav">
<li class="nav-item">
<a id="version" class="nav-link" href="/"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.npmjs.com/package/bootstrap-select-dropdown">
npm
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/thompsonsj/bootstrap-select-dropdown">
<svg class="ion ion-social-github">
<use xlink:href="#ion-social-github"></use>
</svg>
</a>
</li>
</ul>
<form class="form-inline ml-2">
<a href="https://github.com/thompsonsj/bootstrap-select-dropdown/archive/master.zip" class="btn btn-outline-light my-2 my-sm-0">Download</a>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
<h1>Bootstrap Select Dropdown <small>for Bootstrap 4</small></h1>
</div>
<p class="lead">A jQuery plugin for Bootstrap 4 that converts <code><select></code> and <code><select multiselect></code> elements to dropdowns. Uses Bootstrap's dropdown plugin and fuse.js for fuzzy search.</p>
<div class="page-header">
<h2>Test 0</h2>
</div>
<p>
Default.
</p>
<div class="form-group">
<label for="demo_overview">Test 0 label</label>
<select id="test_0" class="form-control" >
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 1</h2>
</div>
<p>
Default: Optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 1 label</label>
<select id="test_1" class="form-control" >
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
<div class="page-header">
<h2>Test 2</h2>
</div>
<p>
Default: Multiselect.
</p>
<div class="form-group">
<label for="demo_overview">Test 2 label</label>
<select id="test_2" class="form-control" multiple="multiple">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 3</h2>
</div>
<p>
Default: Multiselect and optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 3 label</label>
<select id="test_3" class="form-control" multiple="multiple">
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
<div class="page-header">
<h2>Test 4</h2>
</div>
<p>
No badges, buttons.
</p>
<div class="form-group">
<label for="demo_overview">Test 4 label</label>
<select id="test_4" class="form-control" >
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 5</h2>
</div>
<p>
No badges, buttons. Optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 5 label</label>
<select id="test_5" class="form-control" >
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
<div class="page-header">
<h2>Test 6</h2>
</div>
<p>
No badges, buttons. Multiselect.
</p>
<div class="form-group">
<label for="demo_overview">Test 6 label</label>
<select id="test_6" class="form-control" multiple="multiple">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 7</h2>
</div>
<p>
No badges, buttons. Multiselect and optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 7 label</label>
<select id="test_7" class="form-control" multiple="multiple">
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
<div class="page-header">
<h2>Test 8</h2>
</div>
<p>
No search, no badges, buttons.
</p>
<div class="form-group">
<label for="demo_overview">Test 8 label</label>
<select id="test_8" class="form-control" >
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 9</h2>
</div>
<p>
No search, no badges, buttons. Optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 9 label</label>
<select id="test_9" class="form-control" >
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
<div class="page-header">
<h2>Test 10</h2>
</div>
<p>
No search, no badges, buttons. Multiselect.
</p>
<div class="form-group">
<label for="demo_overview">Test 10 label</label>
<select id="test_10" class="form-control" multiple="multiple">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<div class="page-header">
<h2>Test 11</h2>
</div>
<p>
No search, no badges, buttons. Multiselect and optgroups.
</p>
<div class="form-group">
<label for="demo_overview">Test 11 label</label>
<select id="test_11" class="form-control" multiple="multiple">
<optgroup label="Carbohydrates">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="porridge">Porridge</option>
<option value="pasta">Pasta</option>
<option value="potatoes">Potatoes</option>
<option value="rice">Rice</option>
</optgroup>
<optgroup label="Protein">
<option value="beans">Beans</option>
<option value="chickpeas">Chickpeas</option>
<option value="ham">Ham</option>
<option value="fish">Fish</option>
<option value="lentils">Lentils</option>
<option value="sausages">Sausages</option>
</optgroup>
<optgroup label="Milk and dairy products">
<option value="cheese">Cheese</option>
<option value="custard">Custard</option>
<option value="milk">Milk</option>
<option value="yoghurt">Yoghurt</option>
</optgroup>
<optgroup label="Fruit and vegetables">
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="salad">Salad</option>
</optgroup>
<optgroup label="Fats and sugars">
<option value="biscuits">Biscuits</option>
<option value="chocolate">Chocolate</option>
<option value="cooking-oil">Cooking oil</option>
<option value="pastries">Pastries</option>
<option value="salad-dressing">Salad dressing</option>
<option value="sweets">Sweets</option>
</optgroup>
</select>
</div>
</div><!-- /.container -->
<svg width="0" height="0" style="position:absolute">
<defs>
<symbol viewBox="0 0 512 512" id="ion-close">
<path d="M443.6 387.1L312.4 255.4l131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L256 197.8 124.9 68.3c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L68 105.9c-5.4 5.4-5.4 14.2 0 19.6l131.5 130L68.4 387.1c-2.6 2.6-4.1 6.1-4.1 9.8 0 3.7 1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1L256 313.1l130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-.1-3.6-1.6-7.1-4.2-9.7z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-close-circled">
<path d="M256 33C132.3 33 32 133.3 32 257s100.3 224 224 224 224-100.3 224-224S379.7 33 256 33zm108.3 299.5c1.5 1.5 2.3 3.5 2.3 5.6 0 2.1-.8 4.2-2.3 5.6l-21.6 21.7c-1.6 1.6-3.6 2.3-5.6 2.3-2 0-4.1-.8-5.6-2.3L256 289.8l-75.4 75.7c-1.5 1.6-3.6 2.3-5.6 2.3-2 0-4.1-.8-5.6-2.3l-21.6-21.7c-1.5-1.5-2.3-3.5-2.3-5.6 0-2.1.8-4.2 2.3-5.6l75.7-76-75.9-75c-3.1-3.1-3.1-8.2 0-11.3l21.6-21.7c1.5-1.5 3.5-2.3 5.6-2.3 2.1 0 4.1.8 5.6 2.3l75.7 74.7 75.7-74.7c1.5-1.5 3.5-2.3 5.6-2.3 2.1 0 4.1.8 5.6 2.3l21.6 21.7c3.1 3.1 3.1 8.2 0 11.3l-75.9 75 75.6 75.9z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-checkmark-circled">
<path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm114.9 149.1L231.8 359.6c-1.1 1.1-2.9 3.5-5.1 3.5-2.3 0-3.8-1.6-5.1-2.9-1.3-1.3-78.9-75.9-78.9-75.9l-1.5-1.5c-.6-.9-1.1-2-1.1-3.2 0-1.2.5-2.3 1.1-3.2.4-.4.7-.7 1.1-1.2 7.7-8.1 23.3-24.5 24.3-25.5 1.3-1.3 2.4-3 4.8-3 2.5 0 4.1 2.1 5.3 3.3 1.2 1.2 45 43.3 45 43.3l111.3-143c1-.8 2.2-1.4 3.5-1.4 1.3 0 2.5.5 3.5 1.3l30.6 24.1c.8 1 1.3 2.2 1.3 3.5.1 1.3-.4 2.4-1 3.3z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-social-github">
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"></path>
</symbol>
</defs>
</svg>
<script src="bundle.js"></script>
<script>
$(document).ready(function(){
$('#dom_mutation_demo').selectDropdown({
hideSelect: false
});
$('#insert_value').click(function(){
var count = $('#dom_mutation_demo').find('option').length;
var randSelect = Math.floor(Math.random() * count) + 1 ;
var $randSelect = $('#dom_mutation_demo').find('option').eq( randSelect );
$randSelect.after( $randSelect.clone() );
});
$('#remove_value').click(function(){
var count = $('#dom_mutation_demo').find('option').length;
var randSelect = Math.floor(Math.random() * count) + 1 ;
var $randSelect = $('#dom_mutation_demo').find('option').eq( randSelect );
$randSelect.remove();
});
});
</script>
<script>
$(document).ready(function(){
$('#test_0').selectDropdown({
});
});
$(document).ready(function(){
$('#test_1').selectDropdown({
});
});
$(document).ready(function(){
$('#test_2').selectDropdown({
});
});
$(document).ready(function(){
$('#test_3').selectDropdown({
});
});
$(document).ready(function(){
$('#test_4').selectDropdown({
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_5').selectDropdown({
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_6').selectDropdown({
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_7').selectDropdown({
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_8').selectDropdown({
"search" : false,
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_9').selectDropdown({
"search" : false,
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_10').selectDropdown({
"search" : false,
"badges" : false,
"selectButtons" : true
});
});
$(document).ready(function(){
$('#test_11').selectDropdown({
"search" : false,
"badges" : false,
"selectButtons" : true
});
});
</script>
</body>
</html>