elohr

Date Range Picker Selectable Popup Form

jQuery Selectable

Options Examples Documentation Git Repository Download v1.0.1

Selectable is a jQuery plugin that works as an alternative to select html elements. It has the options to either be a single or multiple select object. It can get the options locally or from a remote server using AJAX. It works on all major browsers (including mobile).

Setup

Add the .js and .css files to your site. Copy the close.png file to the same folder as the .css file.

Clone from git: git clone https://github.com/elohr/jquery.selectable.git

Or install from npm: npm install jquery.selectable

html

<link rel="stylesheet" href="css/selectable.css"/>
<script src="js/jquery.selectable.min.js"></script>

Single Select

In here we are creating a Selectable object based on pre-defined options. By default it will be single select element.

Iron Man 3 The Wolf of Wall Street Gravity Man of Steel The Hobbit

html

<div id="s1" class="selectable" data-title="Selecting a Movie" data-placeholder="Select a movie">
<span data-value="option1" class="selectable-option">Iron Man 3</span>
<span data-value="option2" class="selectable-option">The Wolf of Wall Street</span>
<span data-value="option3" class="selectable-option">Gravity</span>
<span data-value="option4" class="selectable-option">Man of Steel</span>
<span data-value="option5" class="selectable-option">The Hobbit</span>
</div>

js

$('#s1').Selectable();

Multiple Select

In here we are creating a Selectable object based on pre-defined options. By default it will be single select element.

Iron Man 3 The Wolf of Wall Street Gravity Man of Steel The Hobbit

html

<div id="s2" class="selectable" data-title="Selecting a Movie" data-placeholder="Select a movie">
<span data-value="option1" class="selectable-option">Iron Man 3</span>
<span data-value="option2" class="selectable-option">The Wolf of Wall Street</span>
<span data-value="option3" class="selectable-option">Gravity</span>
<span data-value="option4" class="selectable-option">Man of Steel</span>
<span data-value="option5" class="selectable-option">The Hobbit</span>
</div>

js

$('#s2').Selectable({
allowMultipleSelect: true
});

More Options

In here we are creating a Selectable object based on pre-defined options. By default it will be single select element.

Iron Man 3 The Wolf of Wall Street Gravity Man of Steel The Hobbit

html

<div id="s3" class="selectable" data-title="Selecting a Movie" data-placeholder="Select a movie">
<span data-value="option1" class="selectable-option">Iron Man 3</span>
<span data-value="option2" class="selectable-option">The Wolf of Wall Street</span>
<span data-value="option3" class="selectable-option">Gravity</span>
<span data-value="option4" class="selectable-option">Man of Steel</span>
<span data-value="option5" class="selectable-option">The Hobbit</span>
</div>

js

$('#s3').Selectable({
allowMultipleSelect: true,
minLengthForSearch: 3,
fieldName: 'movie-field',
fieldId: 'movie-field-ID',
popupTitle: 'Which movies do you like?',
placeholder: 'Do you like any movies?',
searchDelay: 50
});

Events

In here we are creating a Selectable object based on pre-defined options. By default it will be single select element.

Iron Man 3 The Wolf of Wall Street Gravity Man of Steel The Hobbit

html

<div id="s4" class="selectable" data-title="Movie" data-placeholder="Select a movie">
<span data-value="option1" class="selectable-option">Iron Man 3</span>
<span data-value="option2" class="selectable-option">The Wolf of Wall Street</span>
<span data-value="option3" class="selectable-option">Gravity</span>
<span data-value="option4" class="selectable-option">Man of Steel</span>
<span data-value="option5" class="selectable-option">The Hobbit</span>
</div>

js

$('#s4').Selectable({
allowMultipleSelect: true,
showNewButton: true,

initialized: function() {
console.log('#s4 -> initialized')
},
selectionAdded: function() {
console.log('#s4 -> selectionAdded')
},
selectionRemoved: function() {
console.log('#s4 -> selectionRemoved')
},
activeSelectionRemoved: function() {
console.log('#s4 -> activeSelectionRemoved')
},
opening: function() {
console.log('#s4 -> opening')
},
opened: function() {
console.log('#s4 -> opened')
},
closing: function() {
console.log('#s4 -> closing')
},
closed: function() {
console.log('#s4 -> closed')
},
searching: function() {
console.log('#s4 -> searching')
},
minSearchLengthNotReached: function() {
console.log('#s4 -> minSearchLengthNotReached')
},
newButtonClicked: function() {
console.log('#s4 -> newButtonClicked')
},

// The following three are only used when using AJAX
searchFailed: function() {
console.log('#s4 -> searchFailed')
},
optionsLoaded: function() {
console.log('#s4 -> optionsLoaded')
},
noResults: function() {
console.log('#s4 -> noResults')
}
});

Programmatic Access

In here we are creating a Selectable object based on pre-defined options. By default it will be single select element.

Iron Man 3 The Wolf of Wall Street Gravity Man of Steel The Hobbit

html

<div id="s5" class="selectable" data-title="Selecting a Movie" data-placeholder="Select a movie">
<span data-value="option1" class="selectable-option">Iron Man 3</span>
<span data-value="option2" class="selectable-option">The Wolf of Wall Street</span>
<span data-value="option3" class="selectable-option">Gravity</span>
<span data-value="option4" class="selectable-option">Man of Steel</span>
<span data-value="option5" class="selectable-option">The Hobbit</span>
</div>

js

$('#s5').Selectable({
allowMultipleSelect: true
});

$('.btn-kill').click($('#s5').data('Selectable').kill);

$('.btn-val').click(function() {
alert($('#s5').data('Selectable').val());
});

$('.btn-selectionCount').click(function() {
alert($('#s5').data('Selectable').selectionCount());
});

$('.btn-open').click($('#s5').data('Selectable').open);

$('.btn-close').click($('#s5').data('Selectable').close);

$('.btn-removeSelection').click($('#s5').data('Selectable').removeSelection);

$('.btn-search').click(function() {
$('#s5').data('Selectable').open();
$('#s5').data('Selectable').search('Gravi');
});

$('.btn-addHiddenFieldToSearch').click(function() {
$('#s5').data('Selectable').addHiddenFieldToSearch('name', 'val');
});

$('.btn-getNewButtonDOMElement').click(function() {
console.log($('#s5').data('Selectable').getNewButtonDOMElement());
});