https://myqip.ru/js/custom_select.js

1$(document).ready(function(){
2	init_custom_select();
3});
4
5function init_custom_select() {
6	$('.custom_select').each(function() {
7	var $this = $(this), numberOfOptions = $(this).children('option').length;
8	$this.addClass('select_hidden');
9	$this.wrap('<div class="select"></div>');
10	$this.after('<div class="select_styled"></div>');
11	$this.mob = $('#'+$this.attr('id')+'_mob');
12	var $styledSelect = $this.next('div.select_styled');
13	var $styledSelect2 = $this.mob.find('h4 b');
14	$styledSelect.text($this.children('option').eq(0).text());
15	$styledSelect2.text($this.children('option').eq(0).text())
16	var $list = $('<ul />', {
17		'class': 'select_options'
18	}).insertAfter($styledSelect);
19	var $list2 = $this.mob.find('ul');
20	for (var i = 0; i < numberOfOptions; i++) {
21		if ($this.children('option').eq(i).attr('cnt')) {
22			var cnt = parseInt($this.children('option').eq(i).attr('cnt'));
23			if (cnt > 1000) {
24				cnt = Math.ceil(cnt/1000)+'K';
25			}
26			var l = $('<li />', {
27				html: '<span>'+cnt+'</span>'+$this.children('option').eq(i).text(),
28				rel: $this.children('option').eq(i).val(),
29				className: $this.children('option').eq(i).className
30			});
31		}
32		else {
33			var l = $('<li />', {
34				text: $this.children('option').eq(i).text(),
35				rel: $this.children('option').eq(i).val(),
36				className: $this.children('option').eq(i).className
37			});
38		}
39		var l2 = $('<li />', { rel: $this.children('option').eq(i).val()});
40		var a = $('<a />', {
41			text: $this.children('option').eq(i).text(),
42			rel: $this.children('option').eq(i).val()
43		}).appendTo(l2);
44		l.appendTo($list);
45		l2.appendTo($list2);
46		if ($this.children('option').eq(i).attr('selected')) {
47			$('li',$list).eq(i).addClass('selected');
48			$('li',$list2).eq(i).addClass('selected');
49			$styledSelect.text($this.children('option').eq(i).text());
50			$styledSelect2.text($this.children('option').eq(i).text());
51			
52		}
53	}
54	var $listItems = $list.children('li');
55	var $listItems2 = $list2.children('li');
56	$this.parent().on( 'click', function(e) {
57		e.stopPropagation();
58		$('div.select_styled.active').each(function(){
59			if ($this.parent().children('div.select_styled')[0] != this) {
60				$(this).removeClass('active').next('ul.select_options').hide();
61			}
62		});
63		$(this).children('div.select_styled').toggleClass('active').next('ul.select_options').toggle();
64	});
65
66	$listItems.on( 'click', function(e) {
67		e.stopPropagation();
68		var $self = $(this);
69		$styledSelect.text( $self.text() ).removeClass('active');
70		
71		$this.find('option:selected').each( function() {
72			$(this).removeAttr('selected');
73		});
74		$this.find('[value=\'' + $self.attr('rel')+'\']').attr("selected", "selected");
75		$list.find('li.selected').removeClass('selected');
76		$list2.find('li.selected').removeClass('selected');
77		$(this).addClass('selected');
78		$list.hide();
79		$this.trigger('change');
80	});
81	
82	$listItems2.on( 'click', function(e) {
83		e.stopPropagation();
84		var $self = $(this);
85		$styledSelect.text( $self.text() ).removeClass('active');
86		
87		$this.find('option:selected').each( function() {
88			$(this).removeAttr('selected');
89		});
90		$this.find('[value=\'' + $self.attr('rel')+'\']').attr("selected", "selected");
91		$list2.find('li.selected').removeClass('selected');
92		$(this).addClass('selected');
93		$list.hide();
94		$this.trigger('change');
95	});
96
97	$this.on( 'change', function(e) {
98		e.stopPropagation();
99		var $self = $(this);
100		setTimeout( function() {
101			$styledSelect.text( $self.find(':selected').text() );
102			$styledSelect2.text( $self.find(':selected').text() );
103		}, 0);
104	});
105
106	$("body").on( 'click', function() {
107		$styledSelect.removeClass('active');
108		$list.hide();
109	});
110});
111	
112	
113}