Quick[select] by eggboxio

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.

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 type="text/javascript">
	$('#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 type="text/javascript">
	$('#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;
}

Tested with...

jQuery 2
IE 11
Firefox 40
Chrome 45
Safari 8
Chrome on Android/iOS
Safari on iOS

This is not to say it will not work on lower versions, or other browsers.

Install

Download the source files from GitHub. Include the JS and CSS files in your HEAD tag:

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

Attach Quick[select] to any of your select boxes:

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

Options

Option	Type	Default	Description
activeButtonClass	String	'active'	Class added to active/selected button
breakOutValues	Array	[]	Options to break out of the select box
buttonClass	String	''	Class added to each button
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)

Unlicensed

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

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 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.

For more information, please refer to http://unlicense.org

Quick[select]