FancySelect jQuery pseudo select list

| July 31, 2012 | 0 Comments

Styling select lists can be a pain and they never quite turn out the way you would like. I’ll go back later and make this easier to download and use. The css could probably be shortened up a bit too.

(function( $ ) {    
  $.fn.fancySelect = function(sel) {         
    var saved_value     = $('.fancyselect-selected li', this);
    var list            = $('.fancyselect-list', this);
    var list_element    = $('.fancyselect-list li', this);
    var selected_element= $('.fancyselect-list .selected', this);
    var obj_container   = $(this);
    var name            = this.attr('id');
    var selected        = sel ? sel : '';
 
    //sets the width of the list, if the LI is biggest, use that 
    var max_width       = 0;    
    var saved_width     = saved_value.outerWidth();
    var list_width      = list_element.outerWidth();  
    if(saved_width > list_width) max_width = saved_width;    
    else max_width = list_width;
 
    // creating the menu and junk
    $('.fancyselect-selected', this).width(max_width);        
    $('.fancyselect-list', this).width(max_width);
    $('.fancyselect-list', this).hide();
    obj_container.append('');
 
    // simulating optgroup, if the class is group it can't be selected
    $('.fancyselect-list .group').unbind('click');    
 
    //saves title to data and removes title attr so it doesn't show 
    list_element.hover(function() {
        if($(this).attr('title')) $(this).data('title', $(this).attr('title')).removeAttr('title');
    });
 
    // clicking the saved value at the top opens the option list (html select)
    saved_value.click(function() {
        list.slideToggle('fast');
    });     
 
    // clicking a list element (html option)
    list_element.click(function() {
        var data_text = $(this).text();
        var data_title = $(this).data('title') ? $(this).data('title') : '';
        var data_out = '';
 
        if(data_title.length > 0) data_out = data_title;
        else data_out = data_text;
 
        $('#form_'+name).val(data_out);
        saved_value.html(data_text);
 
        list_element.removeClass('selected');
        $(this).addClass('selected');
 
        list.slideToggle('fast');
 
    });
 
    //searching through options to find selected, repeated code but whatever.
    if(selected.length > 0) {
        list_element.each(function(){
            var opt_text = $(this).text();
            var opt_title = $(this).attr('title') ? $(this).attr('title') : '';            
            var opt_out = '';
 
            if(opt_title.length > 0) opt_out = opt_title;
            else opt_out = opt_text;            
 
            if(selected == $.trim(opt_out)) {
                $('#form_'+name).val(opt_out);
                saved_value.html(opt_text);
 
                list_element.removeClass('selected');
                $(this).addClass('selected');                
            }
        });
    }
 
  };
})( jQuery );

Call with the code below.

.fancyselect-selected { border: 1px solid #ccc; background: #999; background: url(images/select_bg.png) repeat-x; height: 25px; }
.fancyselect-selected li { padding: 5px 25px 5px 5px; cursor: pointer; background: url(images/select-arrow-down.png) top right no-repeat; }  /* arrow bg */
.fancyselect-list { border: 1px solid #ccc; background: #fff; position: absolute;   }
.fancyselect-list li { padding: 5px 25px 5px 5px; cursor: pointer; }
.fancyselect-list li:hover { background: #e9e9e9; }
.fancyselect-list .selected, 
.fancyselect-list .selected:hover { background: #e9e9e9; color: #FFF; }
.fancyselect-list .group { font-weight: bold; cursor: default; }
.fancyselect-list .group:hover { background: #fff; }
 
#my-select-list { white-space:nowrap; box-shadow: 0px 3px 3px #ccc; margin-bottom: 10px; float: left; width: 225px; }
#my-select-list  a { text-decoration: none; }
#my-select-list  a:link, 
#my-select-list  a:hover, 
#my-select-list  a:visited {color: #000; }
  <div id="my-select-list">    
    <div>
      <ul>
        <li>Choose an option</li>
      </ul>
    </div>
    <div>
        <ul>
          <li title="">Option group</li>
          <li>Option 1</li>
          <li>Option 2</li>
          <li title="definitely not 3">Option 3</li>
          <li title="might be 4">Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>
        </ul>
    </div>  
  </div>

 

<script type="text/javascript">
$(document).ready(function() {
     $('#my-select-list').fancySelect();
     // or call it out pre selecting a default value
     //$('#my-select-list').fancySelect('Option 5');});
</script>

Category: jQuery

About the Author (Author Profile)

Leave a Reply

You must be logged in to post a comment.