<!-- Example dropdown html -->
<div id="fruit-select" class="dropdown dropselect">
<input type="hidden" name="fruit" value="">
		  Fruit: (dropdown example)<br /> 
<button class="btn btn-default dropdown-toggle" type="button" id="fruit" data-toggle="dropdown" aria-expanded="true">
<span class="dropdown-label">Dropdown</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="option-post-cleanup">
<li role="presentation"><a data-value="orange" data-selected="selected" role="menuitem" tabindex="-1">Orange</a></li>
<li role="presentation"><a data-value="pear" role="menuitem" tabindex="-1">Pear</a></li>
<li role="presentation"><a data-value="apple" role="menuitem" tabindex="-1">Apple</a></li>
<li role="presentation"><a data-value="" role="menuitem" tabindex="-1">None</a></li>
</ul>
</div> 
<!-- Example dropdown html -->

<!-- Example of manually selecting -->
<div>
<button class="btn btn-default" type="button" onclick="$('#fruit-select').dropselect('select','pear');"> Manually select "pear" using javascript </button>
</div>

<!-- red information line displayed here -->
<div id="display">
</div>
            

<!-- Example dropselect javascript -->
<script>    
    function display_fruit(){
	//get current value of select
	var value=$('#fruit-select').dropselect('value');
	//display red information line
	$("#display").html('<br><p>"'+value+'" selected. This will set the value of hidden input "fruit" to "'+value+'" and the value will be posted if wrapped by a form element.</p>');
    }
    
    $(document).ready(function () {
	//make Bootstrap dropdown to behave like select
	//this is enough for most people! When user selects an option, a hidden input named "fruit" with the selected value is created.
        $('.dropselect').dropselect();
		
	  	//set onchange event handler to display red information line
	  	$('#fruit-select').on('change', display_fruit);      
	});	
</script>