turn Selectboxes into bootstrap btn dropdown

main.js

 (function ($, undefined) {
     $.fn.gfSelect = function () {
			 var Selects = this;
			 Selects.each(function(i){
				 var GFSelect = $(this),
				 btnHtml = '<div class="btn-group">';
				 btnHtml += '<button type="button" class="btn btn-default btn-gf-select dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select One <span class="caret"></span></button>';
	  	 	 btnHtml += '<ul class="dropdown-menu">';

				 $(this).find('option').each(function(j){
					 var GFOption = $(this);
					 if(GFOption.text() !== 'Select One'){
						 btnHtml += '<li><a href="#" class="js-link-val" data-value="' + GFOption.val() + '" data-target-input="' +  GFSelect.attr('id') + '">' + GFOption.text() + '</a></li>';
					 }
				 });
			 	 btnHtml += '</ul></div>';
				 GFSelect.hide();
				 GFSelect.parent().append(btnHtml);
			 });

			 $('.js-link-val').click(function(evt){
				 evt.preventDefault();
				 var Selected = $(this),
				 		id = '#' + Selected.attr('data-target-input');

				Selected.parents('.btn-group').find('button').text(Selected.text());
				 $(id).val(Selected.attr('data-value'));
			 });
     };
 })(jQuery);