Fake Select

Turn SELECT element into Bootstrap button dropdown

Demo

This will change this into this: or or or or or

Dependencies

How to use

1. Include the script

<script src="js/fake-select.js"></script>

<script>
	jQuery(document).ready(function($) {
		$('.fake-select').fakeSelect();
	});
<script>

2. Add class to your SELECT

This is optional, depends on your selector on step 1, if you use 'select' as your selector, you don't need to add this class.

<select class="fake-select" title="Test fake select" name="select1">
	<option>Please select</option>
	<option value="1">Lorem</option>
	<option value="2">ipsum</option>
	<option value="3">dolor</option>
	<option value="4">sit</option>
	<option value="5">amet</option>
	<option value="6">Lorem ipsum</option>
	<option value="7">Lorem ipsum dolor</option>
	<option value="8">Lorem ipsum dolor sit</option>
	<option value="9">lorem</option>
	<option value="10">ipsum</option>
</select>

Options

Options can be passed via function parameter or data attribute.

1. Set option via function parameter

<script>
	jQuery(document).ready(function($) {
		$('.fake-select').fakeSelect({
			btnSize :'btn-sm',
			btnStyle:'btn-danger'
		});
	});
<script>

2. Set option via data-attribute

Setting option via data attribute will override default option and parameter option.

<select class="fake-select" data-btn-size="btn-lg" data-btn-style="btn-primary">
    //
</select>

Option	Default value	Possible value
btnSize	:	btn-xs \| btn-sm \| btn-lg
btnStyle	: btn-default	btn-default \| btn-warning \| btn-success \| btn-danger \| btn-primary