Overview

Do you like select boxes?

Select boxes are a two tap/click operation. They take the user out of the flow of the form, and usually there are certain answers that will be more commonly chosen than others. Take the example above, most would reply with "yes" or "no". Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.

Quick[select] prompts a user to an answer but provides flexibility for questions that need it. Take the following example:

When would you like your wake up call?

Quick[select] uses the browser's native select list for its overflow, meaning it will work great on all devices.

Features

Install

Use bower: bower install quick-select --save or download the source files directly from GitHub.

Include the jQuery, Quick[select] JS and CSS files then attach Quick[select] to any of your select boxes:

<script>
	$('select').quickselect({
		breakOutValues: ['1', '2', '3']
	});
</script>

Options

Option Type Default Description
activeButtonClass String 'active' Class added to active/selected button
breakOutAll Boolean false Overrides breakOutValues and breaks out all of the options
breakOutValues Array [] Values of options to break out of the select box
buttonClass String '' Class added to each button
buttonDefaultClass String '' Class added to each button if select box is not a required field
buttonRequiredClass String '' Class added to each button if select box is a required field
buttonTag String 'button' The HTML tag used for the Quick[select] buttons.
namespace String 'quickselect' Name appended to each class element. If changed, be careful to also update the quickselect.css file
selectDefaultText String 'More…' Text to display on non-selected select button
wrapperClass String '' Class to apply to the wrapping div (useful for Bootstrap grouped-buttons)

Examples

Bootstrap theme

What's your favourite meal?

<select id="bootstrap-example">
	<option value="">Select one...</option>
	<option value="Breakfast">Breakfast</option>
	<option value="Brunch">Brunch</option>
	<option value="Lunch">Lunch</option>
	<option value="Afternoon Tea">Afternoon Tea</option>
	<option value="Dinner">Dinner</option>
	<option value="Midnight Snack">Midnight Snack</option>
	<option value="I do not know">I do not know</option>
</select>
<script>
	$('#bootstrap-example').quickselect({
		activeButtonClass: 'btn-primary active',
		breakOutValues: ['Breakfast', 'Lunch', 'Dinner'],
		buttonClass: 'btn btn-default',
		selectDefaultText: 'Other',
		wrapperClass: 'btn-group'
	});
</script>
What's your favourite meal? (show all options)

<select id="bootstrap-example2">
	<option value="">Select one...</option>
	<option value="Breakfast">Breakfast</option>
	<option value="Brunch">Brunch</option>
	<option value="Lunch">Lunch</option>
	<option value="Afternoon Tea">Afternoon Tea</option>
	<option value="Dinner">Dinner</option>
	<option value="Midnight Snack">Midnight Snack</option>
	<option value="I do not know">I do not know</option>
</select>
<script>
	$('#bootstrap-example').quickselect({
		activeButtonClass: 'btn-primary active',
		breakOutAll: true,
		buttonClass: 'btn btn-default',
		selectDefaultText: 'Other',
		wrapperClass: 'btn-group'
	});
</script>
What's your favourite meal? (select box disabled: also disables break-out buttons)

<select id="bootstrap-example3" disabled>
	<option value="">Select one...</option>
	<option value="Breakfast">Breakfast</option>
	<option value="Brunch">Brunch</option>
	<option value="Lunch">Lunch</option>
	<option value="Afternoon Tea">Afternoon Tea</option>
	<option value="Dinner">Dinner</option>
	<option value="Midnight Snack">Midnight Snack</option>
	<option value="I do not know">I do not know</option>
</select>
<script>
	$('#bootstrap-example').quickselect({
		activeButtonClass: 'btn-primary active',
		breakOutValues: ['Breakfast', 'Lunch', 'Dinner'],
		buttonClass: 'btn btn-default',
		selectDefaultText: 'Other',
		wrapperClass: 'btn-group'
	});
</script>

Material Design Lite theme

What was your last takeaway?

<select id="mdl-example">
	<option value="">Select one...</option>
	<option value="Indian">Indian</option>
	<option value="Chinese">Chinese</option>
	<option value="Pizza">Pizza</option>
	<option value="Fish and Chips">Fish and Chips</option>
	<option value="Thai">Thai</option>
	<option value="Fast Food">Fast Food</option>
</select>

<script>
	$('#mdl-example').quickselect({
		activeButtonClass: 'mdl-button--raised',
		breakOutValues: ['Indian', 'Pizza', 'Chinese'],
		buttonClass: 'mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent',
		selectDefaultText: 'Other',
		wrapperClass: 'mdl__wrapper'
	});
</script>

<style type="text/css">
	.mdl__wrapper {
		display: inline-block;
	}
</style>

NB: the dropdown arrow icon has been added with the following CSS:

/* Quick[select] Tweaks */
.quickselect__more--label:before {
	content: '\25BE';
	margin-left: 4px;
	opacity: .5;
}

License

The MIT License (MIT)

Copyright (c) 2015 Will Stone

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.