https://www.umayor.cl/um/bundles/umayor/js/select.js

1$('select').each(function(){
2    var $this = $(this), numberOfOptions = $(this).children('option').length;
3  
4    $this.addClass('select-hidden'); 
5    $this.wrap('<div class="select"></div>');
6    $this.after('<div class="select-styled"></div>');
7
8    var $styledSelect = $this.next('div.select-styled');
9    $styledSelect.text($this.children('option').eq(0).text());
10  
11    var $list = $('<ul />', {
12        'class': 'select-options'
13    }).insertAfter($styledSelect);
14  
15    for (var i = 0; i < numberOfOptions; i++) {
16        $('<li />', {
17            text: $this.children('option').eq(i).text(),
18            rel: $this.children('option').eq(i).val()
19        }).appendTo($list);
20    }
21  
22    var $listItems = $list.children('li');
23
24 
25  
26  $styledSelect.click(function(e) {
27     if($('.select-options').is(':visible')) {
28        e.stopPropagation();
29        $styledSelect.text($(this).text()).removeClass('active');
30        $this.val($(this).attr('rel'));
31      
32        $list.hide();
33        //console.log($this.val());   
34
35     } else {
36        e.stopPropagation();
37        $('div.select-styled.active').each(function(){
38            $(this).removeClass('active').next('ul.select-options').hide();
39        });
40        $(this).toggleClass('active').next('ul.select-options').toggle();
41     }//end if
42    });
43  
44    $listItems.click(function(e) {
45        e.stopPropagation();
46        $styledSelect.text($(this).text()).removeClass('active');
47        $this.val($(this).attr('rel'));
48        $list.hide();
49        //console.log($this.val());
50    });
51    
52    $(document).click(function() {
53        $styledSelect.removeClass('active');
54        $list.hide();
55    });
56
57});
58