Selection Box

Vanilla with default styling

Some simple styling

Tranquility

Selection Box component is completely stylable with custom themes

Flags

Shows how you can include images on options and in the display area reflecting the current selection. Both the display area and the options are customisable by passing rendering functions in the configuration object. The renderDisplayArea() function takes two arguments: the first argument is the text of the currently selected option, the second argument is the value of the option. These can be used to create class names for styling the component. Here we use the value to show the currently selected flag in the display area.

var flags = $('#flags');
var flagsselectionBox = new SelectionBox(flags, {
	renderDisplayArea(text, value) {
		return [
			'<div data-country="' + value + '">' + text + '</div>'
		].join();
	},
	renderOption : function(text) {
		return [
			'<div class="country-option">',
			'<span class="country-name">' + text + '</span>',
			'<span class="country-flag"></span>',
			'</div>'
		].join('');
	}
});