Skip to content

Instantly share code, notes, and snippets.

@burdiuz

burdiuz/bootstrap-dropdown-select.js

Last active September 13, 2021 00:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save burdiuz/d09a8f5e1511375c2963ed49c4d4ff1a to your computer and use it in GitHub Desktop.
Save burdiuz/d09a8f5e1511375c2963ed49c4d4ff1a to your computer and use it in GitHub Desktop.
Download ZIP
Adds some `<select>` element functionality to Bootstrap dropdown control -- you can use `.val()` method and listen to `change` event.
Raw
readme.md

Bootstrap Dropdown Select plugin

Adds some <select> element functionality to Bootstrap dropdown control -- you can use .val() method and listen to change event.

API

  • dropdown(command:String, arg1:any):void -- execute one of available commands.
  • 'init' - call dropdownInit() and pass arg1 as default value.
  • 'reset' - call dropdownReset().
  • 'refresh' - call dropdownRefresh().
  • dropdownInit(command:String, defaultValue:any):void - initialize dropdown, will select default value and add click listener to LI elements of dropdown menu.
  • dropdownReset():void - reset dropdown to default value.
  • dropdownRefresh():void - refresh dropdown menu by applying CSS class to selected LI element.

Selected LI element receives CSS class dropdown-item-selected.

Look for example in example.html.

Install

via npm

npm install gist:d09a8f5e1511375c2963ed49c4d4ff1a --save

via git, dependencies excluded

git clone https://gist.github.com/burdiuz/d09a8f5e1511375c2963ed49c4d4ff1a bootstrap-dropdown-select

Dependencies

Raw
bootstrap-dropdown-select.js
// Uses Node, AMD or browser globals to create a module.
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'jquery-custom-valhooks', 'bootstrap'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('jquery'), require('jquery-custom-valhooks'), require('bootstrap'));
} else {
// Browser globals (root is window)
factory(root.jQuery);
}
}(this, function($) {
var SELECTED_CSS_CLASS = 'dropdown-item-selected';
$.setValHook('div', '.dropdown');
$.setValHook('li', 'div.dropdown ul.dropdown-menu li', function($el) {
var value = $el.data('value');
return value !== undefined ? value : $el.text();
});
$.fn.dropdown = function(command, arg1) {
switch (command) {
case 'init':
this.dropdownInit(arg1);
break;
case 'reset':
this.dropdownReset();
break;
case 'refresh':
this.dropdownRefresh();
break;
}
};
$.fn.dropdownInit = function(defaultValue) {
this.each(function(index, item) {
init($(item), defaultValue);
});
};
$.fn.dropdownReset = function() {
this.each(function(index, item) {
reset($(item));
});
};
$.fn.dropdownRefresh = function() {
this.each(function(index, item) {
refresh($(item));
});
};
function init($el, defaultValue) {
if (defaultValue === undefined && (defaultValue = $el.data('default-value')) === undefined) {
defaultValue = $el.find('ul.dropdown-menu li:first-child').val();
}
$el.data('default-value', defaultValue);
$el.on('click', 'ul.dropdown-menu li', function(event) {
event.preventDefault();
setSelected($el, $(this));
$el.trigger('change');
});
reset($el);
}
function reset($el) {
setSelectedValue($el, $el.data('default-value'));
}
function refresh($el) {
var $li = $el.find('ul.dropdown-menu li.' + SELECTED_CSS_CLASS);
if ($li.length) {
setSelected($el, $li);
}
}
function setSelected($dropdown, $li) {
setSelectedValue($dropdown, $li.val(), $li);
}
function setSelectedValue($dropdown, value, $li) {
if (!$li) {
$li = $dropdown.find('ul.dropdown-menu li[data-value="' + value + '"], ul.dropdown-menu li:contains("' + value + '")').eq(0);
}
$dropdown.find('li.' + SELECTED_CSS_CLASS).removeClass(SELECTED_CSS_CLASS);
$li.addClass(SELECTED_CSS_CLASS);
$dropdown.find('button.dropdown-toggle:first-child').text($li.text());
$dropdown.val(value);
}
}));
Raw
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdown Select Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="node_modules/JQuery-custom-valhooks/JQuery-custom-valhooks.js"></script>
<script type="text/javascript" src="bootstrap-dropdown-select.js"></script>
<script type="text/javascript">
$(function() {
$('div.dropdown.auto-init').dropdown('init');
$('#ddown1').on('change', function() {
$('#text1').text($(this).val());
});
$('#ddown1a').on('change', function() {
$('#text1a').text($(this).val());
});
$('#ddown2').on('change', function() {
$('#text2').text($(this).val());
});
$('#ddown2a').on('change', function() {
$('#text2a').text($(this).val());
});
$('#ddown3').dropdownInit('less');
$('#ddown3').on('change', function() {
$('#text3').text($(this).val());
});
});
</script>
</head>
<body>
<form>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Bootstrap Dropdown Select Example</h2>
</div>
</div>
<div class="row">
<h4 class="col-xs-12">Dropdown with titles only</h4>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<div class="dropdown auto-init" id="ddown1">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML 5</a></li>
<li><a href="#">HTML 4</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">LESS</a></li>
<li><a href="#">SASS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">TypeScript</a></li>
<li><a href="#">CoffeeScript</a></li>
<li><a href="#">LiveScript</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</div>
<div class="col-xs-6">
Change to: <span id="text1"></span>
</div>
</div>
<div class="row">
<h4 class="col-xs-12">Dropdown with titles only and default set to XHTML</h4>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<div class="dropdown auto-init" id="ddown1a" data-default-value="XHTML">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML 5</a></li>
<li><a href="#">HTML 4</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">LESS</a></li>
<li><a href="#">SASS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">TypeScript</a></li>
<li><a href="#">CoffeeScript</a></li>
<li><a href="#">LiveScript</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</div>
<div class="col-xs-6">
Change to: <span id="text1a"></span>
</div>
</div>
<div class="row">
<h4 class="col-xs-12">Dropdown with values</h4>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<div class="dropdown auto-init" id="ddown2">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li data-value="html5"><a href="#">HTML 5</a></li>
<li data-value="html4"><a href="#">HTML 4</a></li>
<li data-value="html*"><a href="#">HTML</a></li>
<li data-value="xhtml"><a href="#">XHTML</a></li>
<li data-value="css"><a href="#">CSS</a></li>
<li data-value="less"><a href="#">LESS</a></li>
<li data-value="sass"><a href="#">SASS</a></li>
<li data-value="js"><a href="#">JavaScript</a></li>
<li data-value="ts"><a href="#">TypeScript</a></li>
<li data-value="cs"><a href="#">CoffeeScript</a></li>
<li data-value="ls"><a href="#">LiveScript</a></li>
<li data-value="as"><a href="#">ActionScript</a></li>
</ul>
</div>
</div>
<div class="col-xs-6">
Change to: <span id="text2"></span>
</div>
</div>
<div class="row">
<h4 class="col-xs-12">Dropdown with values and default set to CoffeeScript</h4>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<div class="dropdown auto-init" id="ddown2a" data-default-value="cs">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li data-value="html5"><a href="#">HTML 5</a></li>
<li data-value="html4"><a href="#">HTML 4</a></li>
<li data-value="html*"><a href="#">HTML</a></li>
<li data-value="xhtml"><a href="#">XHTML</a></li>
<li data-value="css"><a href="#">CSS</a></li>
<li data-value="less"><a href="#">LESS</a></li>
<li data-value="sass"><a href="#">SASS</a></li>
<li data-value="js"><a href="#">JavaScript</a></li>
<li data-value="ts"><a href="#">TypeScript</a></li>
<li data-value="cs"><a href="#">CoffeeScript</a></li>
<li data-value="ls"><a href="#">LiveScript</a></li>
<li data-value="as"><a href="#">ActionScript</a></li>
</ul>
</div>
</div>
<div class="col-xs-6">
Change to: <span id="text2a"></span>
</div>
</div>
<div class="row">
<h4 class="col-xs-12">Dropdown with values and default set to LESS via init()</h4>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<div class="dropdown auto-init" id="ddown3" data-default-value="cs">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li data-value="html5"><a href="#">HTML 5</a></li>
<li data-value="html4"><a href="#">HTML 4</a></li>
<li data-value="html*"><a href="#">HTML</a></li>
<li data-value="xhtml"><a href="#">XHTML</a></li>
<li data-value="css"><a href="#">CSS</a></li>
<li data-value="less"><a href="#">LESS</a></li>
<li data-value="sass"><a href="#">SASS</a></li>
<li data-value="js"><a href="#">JavaScript</a></li>
<li data-value="ts"><a href="#">TypeScript</a></li>
<li data-value="cs"><a href="#">CoffeeScript</a></li>
<li data-value="ls"><a href="#">LiveScript</a></li>
<li data-value="as"><a href="#">ActionScript</a></li>
</ul>
</div>
</div>
<div class="col-xs-6">
Change to: <span id="text3"></span>
</div>
</div>
</div>
</form>
</body>
</html>
Raw
package.json
{
"name": "bootstrap-dropdown-select",
"description": "Makes Bootstrap Dropdown to behave like normal select element -- it will obtain .val() hook and will fire 'change' event when value was changed.",
"version": "0.0.1",
"main": "bootstrap-dropdown-select.js",
"dependencies": {
"JQuery-custom-valhooks": "https://gist.github.com/burdiuz/859f8c06fa90b6de8e5d3cce08031028",
"jquery": ">=1.7.0",
"bootstrap": ">=3.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment