VERSION 1.2 IS NOW AVAILABLE. CLICK TO DOWNLOAD BUTTON
DOWNLOAD

INSTALLATION


Step 1: Download Plugin from here.
Step 2: Include the vSelect.js and vSelect.css to your head of html page. Example:

For vSelect.js
<script language="javascript" src="vSelect.js" ></script>

For vSelect.css
<link rel="stylesheet" href="vSelect.css"/>

Step 3: Set the vSelect to your SELECT BOX with JQuery. Example:

<script>
    $(document).ready(function(){
        $('select').vSelect();
    });
</script>

Step 4: Refresh the page and enjoy it!

THEMES


Two themes is now available.



<script>
    $(document).ready(function(){
        $('select').vSelect({
            theme: "light" //or dark
        });
    });
</script>


MULTIPLE SELECT


To use the "multiple" option, just add multiple property to your select tag. Exmaple:


<select multiple name="select[]">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    //etc ...
</select>



To use the "search" option, set the search item to true. Example:


<script>
    $(document).ready(function(){
        $('select').vSelect({
            theme: "light",
            search: true //or false
            searchTitle: "Search ..."
        });
    });
</script>


EFFECTS


To use the "effect" option, set the effect item to "slide1" or "slide2" or "none" for disable. Example:



<script>
    $(document).ready(function(){
        $('select').vSelect({
            theme: "light",
            search: true, //or false
            effect: "slide1" //or slide2 or none
        });
    });
</script>


DIRECTION


To use the "direction" option, set the dir item to "ltr" or "rtl". default is "ltr". Example:



<script>
    $(document).ready(function(){
        $('select').vSelect({
            theme: "light",
            dir: "rtl" //or ltr
        });
    });
</script>