SelectCustomizer « ilDavid

SelectCustomizer

Postato il 01 dicembre 2009

This is a jQuery (1.2.6) plug-in for select fields customization in all browsers.
As all of you know, the <select> input type of a form isn’t easy to customize with CSS, and of course, each browser render it in a different way.
This script replace the original <select> input with a hidden field (with the same name) and a bunch of divs and span. When the user select an option, the hidden field catch that value and passes it as a normal field of a form.
If JavaScript is disabled a classic select option list is shown.
Example:

This script was taken from Adelaide Webdesigns, but the original script allowed only one select to be customized. My modifications (in collaboration with Michele) allow to customize as many select as you want.
Download the necessary files and tutorial.
The code:

$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
	// based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
	// modified by David Vian http://www.ildavid.com/dblog
    return this.each(function(){
        var obj = $(this);
		var name = obj.attr('id');
		var id_slc_options = name+'_options';
		var id_icn_select = name+'_iconselect';
		var id_holder = name+'_holder';
		var custom_select = name+'_customselect';
        obj.after("&lt;div id=""+id_slc_options+""&gt; &lt;/div&gt;");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("&lt;div title="" + $(this).attr("value") + "" class="selectitems"&gt;&lt;span&gt;" + $(this).html() + "&lt;/span&gt;&lt;/div&gt;");
        });
        obj.before("&lt;input type="hidden" value ="" name="" + this.name + "" id=""+custom_select+""/&gt;&lt;div id=""+id_icn_select+""&gt;" + this.title + "&lt;/div&gt;&lt;div id=""+id_holder+""&gt; &lt;/div&gt;").remove();
        $("#"+id_icn_select).click(function(){
            $("#"+id_holder).slideToggle(200);
        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.title);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).slideToggle(250)
        });
    });
}

A simple guide can be found here: SelectCustomizer.
This script is under the Creative Commons BY-SA license.