Multi Pick List in CRM 2011/2013

I have a one req. in one of the CRM Projects where user want multiple selection option in Option Set

we can create a Multiple Pick List for Dynamic CRM 2011/2013 form too.

User can enter multiple data from Pick List by Checkbox. This will also work on in major browsers (IE, Firefox, Chrome). See the below screen shot.

Below is the js code:

// var_sc_optionset >>  Provide schema-name for Option Set field

// var_sc_optionsetvalue >> Provide schema-name for field which will

//                          store the multi selected values for Option Set

// OS >> Provide Option Set field object

//       (Ex:- document.getElementById("Option Set field schema-name"))

// OSV >> Provide text field object which will store the

//        multi selected values for Option Set

//       (Ex:- document.getElementById("text field schema-name"))

//Method to convert an optionset to multi select Option Set

function ConvertToMultiSelect(var_sc_optionset, var_sc_optionsetvalue, OS, OSV) {

    if (OS != null && OSV != null) {

        OS.style.display = "none";

        // Create a DIV container

        var addDiv = document.createElement("div");

        addDiv.id = var_sc_optionsetvalue + "_m";

        addDiv.style.width = "100%";

        addDiv.style.height = "80px";

        addDiv.style.background = "#ffffff";

        addDiv.style.color = "white";

        addDiv.style.overflow = "auto";

        addDiv.style.border = "1px #6699cc solid";

        OS.parentNode.appendChild(addDiv);

        // Initialise checkbox controls

        for (var i = 1; i < OS.options.length; i++) {

            var pOption = OS.options[i];

            if (!IsChecked(pOption.innerHTML, OS, OSV)) {

                var addInput = document.createElement("input");

                addInput.type = "checkbox";

                addInput.style.border = "none";

                addInput.style.width = "25px";

                addInput.style.align = "left";

                addInput.style.color = "#000000";

                addInput.onclick = function () {

                    OnSave(OS, var_sc_optionsetvalue);

                    createTable(var_sc_optionsetvalue);

                }

            }

            else {

                var addInput = document.createElement("input");

                addInput.type = "checkbox";

                addInput.checked = "checked";

                addInput.style.border = "none";

                addInput.style.width = "25px";

                addInput.style.align = "left";

                addInput.style.color = "#000000";

                addInput.onclick = function () {

                    OnSave(OS, var_sc_optionsetvalue);

                    createTable(var_sc_optionsetvalue);

                }

            }

            //Create Label

            var addLabel = document.createElement("label");

            addLabel.style.color = "#000000";

            addLabel.innerHTML = pOption.innerHTML;

            var addBr = document.createElement("br"); //it's a 'br' flag

            OS.nextSibling.appendChild(addInput);

            OS.nextSibling.appendChild(addLabel);

            OS.nextSibling.appendChild(addBr);

        }

    }

}

//Supported functions

// Check if it is selected

function IsChecked(pText, OS, OSV) {

    if (OSV.value != "") {

        var OSVT = OSV.value.split(",");

        for (var i = 0; i < OSVT.length; i++) {

           if (OSVT[i] == pText)

              return true;

        }

    }

    return false;

}

// var_sc_optionsetvalue >> Provide schema-name for field which will

//                          store the multi selected values for Option Set

// OS >> Provide Option Set field object

// Save the selected text, this field can also be used in Advanced Find

function OnSave(OS, var_sc_optionsetvalue) {

    var getInput = OS.nextSibling.getElementsByTagName("input");

    var result = "";

    for (var i = 0; i < getInput.length; i++) {

        if (getInput[i].checked) {

            result += getInput[i].nextSibling.innerHTML + ",";

        }

    }

    //save value

    control = Xrm.Page.getControl(var_sc_optionsetvalue);

    attribute = control.getAttribute();

    attribute.setValue(result);

}

function createTable(var_sc_optionsetvalue) {

    //get option set value

    var OptionValue = Xrm.Page.getAttribute(var_sc_optionsetvalue);

    var c_OptionValue = Xrm.Page.getControl(var_sc_optionsetvalue);

    var d_OptionValue = var_sc_optionsetvalue + "_d";

    if (OptionValue.getValue() != null) {

        c_OptionValue.setVisible(true);

        var OptionValueHtml = "<div style=\"overflow-y:auto;width:100%; min-height: 5em; max-height: 1000px;\">";

        OptionValueHtml += "<table style='width:100%;height: 100%;'>";

        var OptionValueV = OptionValue.getValue();

        var OptionValueT = OptionValueV.split(",");

        var cols = 0;

        for (var row = 0; row < OptionValueT.length - 1; row++) {

            OptionValueHtml += "<tr  style='height:20px;'>";

            for (var i = cols; i < cols + 3; i++) {

                OptionValueHtml += "<td style='width:33%;'>";

                if (OptionValueT[i] != null || OptionValueT[i] != undefined) {

                    OptionValueHtml += OptionValueT[i];

                }

                OptionValueHtml += "</td>";

            }

            cols = cols + 3;

            OptionValueHtml += "</tr>";

            if (cols >= OptionValueT.length) {

                break;

            }

        }

        OptionValueHtml += "</table>";

        OptionValueHtml += "</div>";

        document.getElementById(d_OptionValue).innerHTML = OptionValueHtml;

    }

    else {

        c_OptionValue.setVisible(false);

    }

}