MultiSelect jQuery plugin demo

by Shobhit Sharma

HTML

<script src="http://lzzluca.github.io/javascript/MultiSelect/multiselect-min.js"></script>
<P class="title">Multiselection without 'ctrl' button on select tag</P>
<P class="descri">* I am the select without groups</P>
<SELECT id = "test_target_no_optgroup"></SELECT>
<INPUT id = "getV" type="button" value="Get value!" />
<P class="descri">* I am the select with groups and i have<BR>the "multiselector by category" as footer</P>
<SELECT id = "test_target_with_optgroup">
    <OPTGROUP id = "test_target_with_optgroup_fc0" label = "Hello!:)"></OPTGROUP>
    <OPTGROUP id = "test_target_with_optgroup_fc1" label = "Foo"></OPTGROUP>
    <OPTGROUP id = "test_target_with_optgroup_fc2" label = "IdontKnow"></OPTGROUP>
    <OPTGROUP id = "test_target_with_optgroup_fc3" label = "BlaBlaBla"></OPTGROUP>
</SELECT>
<INPUT id = "getV2" type="button" value="Get value!" />
<P class="descri_footer">This code is cross browser, tested on IE from 6 to 9, FF 3.6 and last, last version of Chrome, Safari and Opera :)</P>

CSS

select {
    margin-left: 25px;
}

p {
    margin: 15px;
}

.title {
    color: blueviolet;
}

.descri {
    margin-left: 25px;
    color: dimgray;
}

.descri_footer {
    color: lightslategrey;
    font-size: 13px;
    margin-top: 100px;
}

.test-selection {
    background-color: Highlight;
    color: HighlightText;
}

.category {
    cursor: pointer;
}

.wrap_categories {
    margin-left: 25px;
    margin-top: 10px;
    border: 1px solid #d6d6d6;
}

.wrap_categories div:hover {
    background-color: blueviolet;
}

.main_categories {
    display: inline-block;
    width: auto;
}

div.category:hover {
    color: blue;            
}

JavaScript

/*
*
* MultiSelect jQuery plugin 
*
* The external resources are:
* jQuery 1.x + Jquery UI
*
* multiselect-min.js
*     the plugin to get the multiselection
*/

// Populates select tags with option tags

var populateSelects = function(nOptions){
    if(typeof nOptions != "number")
        nOptions = 25;

    var options_HTML = "";

    for(var i = 0; i < nOptions; i++)
        options_HTML += "<OPTION value = 'i am the option " + i + "' >i am the option " + i + "</OPTION>";

    $("#test_target_no_optgroup").append(options_HTML);

    $("#test_target_with_optgroup_fc0").append(options_HTML);
    $("#test_target_with_optgroup_fc1").append(options_HTML);
    $("#test_target_with_optgroup_fc2").append(options_HTML);
    $("#test_target_with_optgroup_fc3").append(options_HTML);
};

// Applies multiselection on select tags

var test_Multiselection = function(){
    $("#test_target_no_optgroup").MultiSelect({
        size: 20,
        css_class_selected: "test-selection"
    });
};

// Applies feature to select / deselect all options inside optgroup, by one click

var test_categoriesSelection = function(){
    $("#test_target_with_optgroup").MultiSelect({
        size: 30,
        css_class_selected: "test-selection",
        enableCategoriesSel: true
    });
}
                
// Main

$(document).ready(function(){

    populateSelects();
  
    test_Multiselection();

    test_categoriesSelection();

    $("#getV").click(function(){
        alert( $("#test_target_no_optgroup").val() );
    });

    $("#getV2").click(function(){
        alert( $("#test_target_with_optgroup").val() );
    });
});