FreeSelect

A select list you can design (jQuery plugin)

Concepts

Allows you to transform a select list turning it into an HTML structure with the presence of class in places appropriate to allow integrators to the formatting, but also suitable features so that the devs can use it seamlessly without thinking about.
No useless features, only select list dropdown type features according to w3c. Keep It Simple.

Features

Compatibility with all navigators (ie >= 7)
No design by the plugin and easily customizable structure
Optgroup and ability to add class to them
Read js and submission of the value as a standard select list
Support these attributes : id, name, disabled, tabindex, class, lang, dir, title, style, size, multiple [form et autofocus (html5)]
Do nothing if attribute size or multiple
Support the onchange event (Limitation: from jQuery 1.8 only the use of the onchange attribute inside the select tag will be taken into account, no recovering of the event binding from js)
No submit of the value if disabled or empty
Methods to read the wording of the selected value, remove or add items, disabled or enable
Route from the list with the up and down arrows
Focus on one item of the list via the striking of a character (first letter)
May not transform the list via a boolean without affecting the use of methods for manipulating the list, the API will fit (from a feature request if detection of a mobile device)
Compatibility with the jQuery plugin validationEngine (taking into account everything that begins with validate in the tag's class attribute, so you will have to process this plugin after freeSelect and positionning the main div)

Install

Each targeted select tag must have an id (id and name have to be the same)
Scripts to be placed before </body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/path/to/freeselect.js"></script>

Code and use

HTML

Basic html structure once the plugin has done the job (firebug can help to know about the available class)

    <div>
	<a>
	    <span>Libellé sélectionné</span>
	    <span>Icone</span>
	</a>
	<ul>
	    <li rel="value">Libellé</li>
	    ...
	</ul>
	<input />
    </div>

Css

The plugin doesn't apply formatting to allow complete freedom to the integrator. The main div receives the class .fs_freeSelect and its id becomes #fs_[select's id]

An example of css file:

    /* To hide the tags before their reconstruction by the plugin */
    select { visibility: hidden; }

    .fs_freeSelect { display: inline-block;  border: 1px solid lightgray; background-color: white; text-align: left; position: relative; }

    /* optgroup's style */
    .fs_optg { font-weight: bold; font-style: italic; padding-left: 3px; }

    .fs_optg_child a { padding-left: 10px; }

    .fs_freeSelect  a { color: black; text-decoration: none;  }

    .fs_freeSelect > a { display: block; padding: 3px; min-width: 150px;  }

    .fs_icon { float: right; }

    .fs_freeSelect ul { list-style-type: none;  position: absolute; display: none; border: 1px solid lightgray; z-index: 1000;
		     min-height: 20px; max-height: 200px; min-width: 200px; overflow-y: auto; overflow-x: hidden; background-color: white;  }

    .fs_freeSelect li a { display: block; padding: 0px 10px 5px 10px; }

    /* the highlighting of options in the list when passing over (give ie7 the ability to do so as it lacks of :focus) */
    .fs_focus { color: white; background-color: lightgray; }

    /* list and options in disabled mode */
    .fs_disabled { background-color: grey!important; cursor: default!important; }

And the hack for ie7 to put inside a [if lte IE 7]

    .fs_freeSelect { display: inline; zoom: 1;  }

    .fs_freeSelect > a { display: block; width: 150px; }

    .fs_libelle { display: inline-block; width: 90%; cursor: pointer; }

    .fs_icon { display: inline-block; float: none; cursor: pointer; }

    /* fix a bug when the scroll disapears if we remove an option (same value as the ul's width) */
    .fs_freeSelect ul { width: 200px; }

    .fs_freeSelect li a { width: 100%; }

Javascript

Initialization of the plugin:

$(document).ready(function(){
    //(optional)variable which keep (set to true) the select tag intact (here, the default value of the plugin)
    $.fn.freeSelect.isMobile = false;

    //option icon to populate the contents of the span which the class is .fs_icon (here, the default value of the plugin)
    $("select").freeSelect({icon: "&nabla;"});
});

Manipulations of the list (here a list which id was test)
All these methods work regardless of the value of the variable $.fn.freeSelect.isMobile

//get the value
$("#test").val();

//get the wording of the selected item
$("#test").freeSelectGetSelectedString();

//add items to the list
var tab_options = [{value: "4", text: "Four"}, {value: "5", text: "Five"}];
var tab_options = [{group_text: "Indonesia", options: [{value: "B1", text: "Bali"}
			    , {value: "L2", text: "Lombok"}, {value: "F3", text: "Flores"}]}
			    ,{value: "HG", text: "Hors groupe"}]; //for an optgroup
$("#test").freeSelectAdd(tab_options);

//remove items from the list
var tab_values = [4, 5];
$("#test").freeSelectRemove(tab_values);

//clear the list
$("#test").freeSelectRemoveAll();

//disabled the list
$("#test").freeSelectDisable();

//enable the list
$("#test").freeSelectEnable();

//disabled some items
var tab_values = [1, 2, 3];
$("#test").freeSelectDisable(tab_values);

//enable some items
var tab_values = [1, 2, 3];
$("#test").freeSelectEnable(tab_values);

Also

The plugin has not been completely refactored (and may never be). It does not respect either all practices and jQuery standards, no one is perfect.
On the other hand it has been tested, suffered many returns of experience and application features. Also, the plugin is used in production on several sites.
Level licence of the public domain, so make what you want if it can be useful to you (just don't tell it's yours as it's not the case)
Good dev and thank you to all those who have given code and knowledge in the computer field.

Bonjour (Active js)

Thierry