JQuery Multi-Select Plug-in

About Jquery Multi-Select Plug-in:

This plug-in is aim at providing a custom multi-select box with custom CSS. It has been tested all of the major browsers: IE-7 & 8, Fire Fox 3.5.x and 3.6, Safari 3.0.x, Google Chorme.

Requirements

It requires Jquery’s version 1.3.2 or later and in the case you want to use the custom scroll bar, it requires JScroll Pane. You can download JQuery from here

How to install:

1. Keep the required files to your desired folder

2. Include the files to your web-page.

3. Set the parameters which you want to change.

4. For using JScroll pane, set the ‘jScrollPane’ parameter like this

jScrollPane : ‘$(“.table_scroll”).jScrollPane({scrollbarWidth: 6, scrollbarMargin:0})’

Note the quotes around the statement. You can change the JScroll pane setting according to your need.

5. To initialize:

$(function(){

$(‘#mulit’).multiselect({selContainerID : ‘selboxID’ });

});

Give the selector to select the multi-select box and call to the “multiselect” plug-in. Set the parameter and give the id of the container where the selected values would be shown.

That’s it.

Version 1.1.0 Release Date March 12, 2010

A new version of JQuery Multi-Select has been launched. In this release some issues related to the Selected values box have been fixed.

If is2ShowSelected is set to true and selContainerID is not provided, it was throwing error on IE-7 and Google Chrome. So this issue has been fixed.

Download Sample Code and Plug-in Version 1.1.0 here

Download Sample Code and Plug-in here

Thanks

Syed Murtaza Hussain Kazmi
PHP and Dotnet 1.1 Website and Software Engineer
Efficiency in code is good but that must be reasonable.

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)