Styled Select jQuery Plugin

styled-select.js

(function($) {
	$.fn.styledSelect = function() {
		return this.each(function() {

		var $this = $(this),
			numberOfOptions = $(this).children('option').length;

		$this.addClass('s-hidden');

		$this.wrap('<div class="styledSelect'+(($this.attr("data-class")) ? " "+$this.attr("data-class") : "")+'"></div>');

		$this.after('<div class="select"></div>');

		var $styledSelect = $this.next('div.select');

		var $selected = $this.children('option:selected');
		var $contentSelected = (($selected.attr("data-photo")) ? '<img src="'+$selected.attr("data-photo")+'" />' : "") + (($selected.attr("data-icon")) ? '<span class="ir ico '+$selected.attr("data-icon")+'"></span>' : "") + $selected.text();

		$styledSelect.html($contentSelected);

		var $list = $('<ul />', {
			'class': 'options'
		}).insertAfter($styledSelect);

		for (var i = 0; i < numberOfOptions; i++) {
			var content = (($this.children('option').eq(i).attr("data-photo")) ? '<img src="'+$this.children('option').eq(i).attr("data-photo")+'" />' : "") + (($this.children('option').eq(i).attr("data-icon")) ? '<span class="ir ico '+$this.children('option').eq(i).attr("data-icon")+'"></span>' : "") + $this.children('option').eq(i).text();
			var $option = $this.children('option').eq(i);

			$('<li />', {
				html: content,
				rel: $this.children('option').eq(i).val(),
				"class": (($selected.val() == $option.val()) ? 'active' : '') +
							($option.attr('disabled') ? ' disabled' : ''),
				"data-photo": $option.attr("data-photo"),
				"data-icon": $option.attr("data-icon")
			}).appendTo($list);
		}

		var $listItems = $list.children('li');

		if($this.attr("data-error")){
			$this.parent().append('<div class="select__error">'+ $this.attr("data-error") +'</div><div class="select__ico select__ico--error"></div></div><div class="select__ico select__ico--ok"></div>');
		}

		$styledSelect.click(function(e) {
			e.stopPropagation();
			if (!$(this).hasClass("active")) {
				$('div.select.active').each(function() {
					$(this).removeClass('active').next('ul.options').hide();
				});
			}
			$(this).toggleClass('active').next('ul.options').toggle();
		});

		$listItems.click(function(e) {
			e.stopPropagation();
			var $selected = $(this);
			if ($selected.hasClass('disabled')){return;}
			var $contentSelected = (($selected.attr("data-photo")) ? '<img src="'+$selected.attr("data-photo")+'" />' : "") + (($selected.attr("data-icon")) ? '<span class="ir ico '+$selected.attr("data-icon")+'"></span>' : "") + $selected.text();
			$styledSelect.html($contentSelected).removeClass('active');

			if ($this.val() != $(this).attr('rel')) {
				$this.val($(this).attr('rel')).change();
			}

			$list.hide();
		});

		$(document).click(function() {
			$styledSelect.removeClass('active');
			$list.hide();
		});

	});
	};
})(jQuery);