awesome-select/dropdown.js

var dropdown_count = 0;
(function ( $ ) {

	$.fn.dropdown = function(options){
		var element = $(this);
		var opts = $.extend({}, $.fn.dropdown.defaults, options)
		
		build(element, opts);
		
		$('body').on('click', '.dropdown', function(){
			animate($(this));
		})

		$('body').on('click', '.dropdown ul li a', function(){
			setValue($(this).parents('.dropdown'), $(this).parent('li').index())
		})

		$(document).mouseup(function (e)
		{
		    var dropdown = $(".dropdown");

		    if (!dropdown.is(e.target) // if the target of the click isn't the container...
		        && dropdown.has(e.target).length === 0) // ... nor a descendant of the container
		    {
		       deanimate()
		    }
		});

		return {

			blue: function(){
				element.css('color', 'blue')
			}
		}
	};

	$.fn.dropdown.defaults = {
		background: "#e5e5e5",
		onOpen_background: "#fff",
		placeholder_color: "#000",
		link_color: "#000"
	}

	function build(element, opts){
		dropdown_count += 1
		var placeholder = element.attr('data-placeholder')
		var id = element.attr('id')
		var options = element.children('option')
		var selected = false;
		var classes = "dropdown";
		var options_html = '';

		var background = opts["background"]
		var onOpen_background = opts["onOpen_background"]
		var placeholder_color = opts["placeholder_color"]
		var link_color = opts["link_color"]

		options.each(function(){
			if ( $(this).attr('selected') == "selected") {
				selected = $(this).text()
			}
			options_html += '<li><a>'+ $(this).text() +'</a></li>';
		})

		if ( selected !== false ) {
			classes += ' hasValue';
		}

		if (typeof id !== typeof undefined && id !== false) {
			id_html = id
		} else {
			id_html = 'dropdown_' + dropdown_count;
			$(element).attr('id', id_html)
		}



		

		var dropdown_html = '<div id="euler_'+ id_html +'" data-select="'+ id_html +'" class = "'+ classes +'"><div class = "bg"></div>';
			dropdown_html += '<div class = "front_face">'
				dropdown_html += '<div class = "bg"></div>'
				dropdown_html += '<div class = "content">'
					if ( selected !== false ) {
						dropdown_html += '<span class="current_value">'+ selected +'</span>';
					}
					dropdown_html += '<span class = "placeholder">'+ placeholder +'</span>'
					dropdown_html += '<i class = "icon">'+ icon() +'</i>'
				dropdown_html += '</div>'
			dropdown_html += '</div>';
			dropdown_html += '<div class = "back_face"><ul>'
				dropdown_html += options_html
			dropdown_html += '</ul></div>';
		dropdown_html += '</div>';

		$(dropdown_html).insertAfter(element)
		$('#euler_' + id_html).css("height", $('#euler_' + id_html).outerHeight() - $('#euler_' + id_html).find('.back_face').outerHeight() )
		element.hide()
		
	}

	function animate(element){

		

		element.addClass('placeholder_animate')
		setTimeout(function(){
			element.addClass('placeholder_animate2')
			element.addClass('animate')
			element.addClass('animate2')
			
		}, 100)
		
	}

	function deanimate(){
		$('.dropdown').removeClass('animate2')
		setTimeout(function(){
		$('.dropdown').removeClass('animate')
		$('.dropdown').removeClass('placeholder_animate2')
			setTimeout(function(){
				$('.dropdown').removeClass('placeholder_animate')
			},100)
		}, 200)
	}

	function setValue(euler_dropdown, value_index){
		var id = euler_dropdown.attr('data-select')
		var select = document.getElementById(id);
		var option_value = $(select).children('option').eq(value_index)
		var callback = $(select).attr('data-callback')
		$(select).val(option_value.val())
		$(euler_dropdown).find('.current_value').remove()
		$(euler_dropdown).find('.front_face .content').prepend('<span class = "current_value">'+ option_value.text() + '</span>')
		$(euler_dropdown).addClass('hasValue')

		if (typeof callback !== typeof undefined && callback !== false) {
			window[callback](option_value.val())
		}
		setTimeout(function(){
			deanimate()
		}, 200)
		
	}

	function icon(){
		return '<svg version="1.1" id="Chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>';
	}

	function change(elem){
		elem.css('color', 'green')
	}
}( jQuery ));

function hello(value){
	console.log("hello world! the selected value is " + value)
}