Multiple Select Dropdown : The users are allowed to select multiple options from the dropdown select. This Amazing snippet Designed by WebDevStudios.
Multiple Select Dropdown
HTML
[code language=”html”]
<div class="wrap">
<h1 class="pen-title">Chosen: Multiple Dropdown</h1>
<p class="pen-description">A simple dropdown using <a href="https://harvesthq.github.io/chosen/">Chosen.js</a>. Find out more, by reading the Chosen <a href="https://harvesthq.github.io/chosen/options.html">options API</a>.</p>
<!– Begin Multiple Dropdown –>
<form class="form" id="foo_form">
<label for="foo_select" class="screen-reader-text">Click to select an option</label>
<select id="foo_select" class="dropdown" form="foo_form" multiple data-placeholder="Click to select an option…">
<option value="null">First option</option>
<option value="null">Second option</option>
<option value="null">Third option</option>
<option value="null">Fourth option</option>
<option value="null">Fifth option</option>
</select>
</form>
<!– End Multiple Dropdown –>
</div><!– .wrap –>
[/code]
CSS / SCSS
[code language=”css”]
.form {
// Reset default Chosen.js styles
.chosen-container {
font-size: rem(16);
// Remove borders and box-shadows
.chosen-single,
.chosen-drop {
border: none;
border-radius: 0;
box-shadow: none;
}
}
// Reset active styles
.chosen-container-active {
// Remove borders and box-shadows
&.chosen-with-drop .chosen-single,
.chosen-choices {
border: none;
border-radius: 0;
box-shadow: none;
}
.chosen-results {
// Remove gradient and set the highlight color
.highlighted {
background: $color-blue;
}
}
}
}
[/code]
JS
[code language=”js”]
/**
* Chosen: Multiple Dropdown
*/
window.WDS_Chosen_Multiple_Dropdown = {};
( function( window, $, that ) {
// Constructor.
that.init = function() {
that.cache();
if ( that.meetsRequirements ) {
that.bindEvents();
}
};
// Cache all the things.
that.cache = function() {
that.$c = {
window: $(window),
theDropdown: $( ‘.dropdown’ ),
};
};
// Combine all events.
that.bindEvents = function() {
that.$c.window.on( ‘load’, that.applyChosen );
};
// Do we meet the requirements?
that.meetsRequirements = function() {
return that.$c.theDropdown.length;
};
// Apply the Chosen.js library to a dropdown.
// https://harvesthq.github.io/chosen/options.html
that.applyChosen = function() {
that.$c.theDropdown.chosen({
inherit_select_classes: true,
width: ‘300px’,
});
};
// Engage!
$( that.init );
})( window, jQuery, window.WDS_Chosen_Multiple_Dropdown );
[/code]
