<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script>
var myForm,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-top",
        labelWidth: 160,
        inputWidth: 160,
        labelHeight: 20
    }, {
        type: "multiselect",
        label: "All Contacts",
        name: "c_all",
        size: 8,
        options: [{
            value: "1",
            text: "Fernando Novick"
        }, {
            value: "2",
            text: "Ted Spengler"
        }, {
            value: "3",
            text: "Lilia Horace"
        }, {
            value: "4",
            text: "Cody Derksen"
        }, {
            value: "5",
            text: "Mathew Musso"
        }, {
            value: "6",
            text: "Nelson Brayboy"
        }]
        }, {
        type: "newcolumn"
    }, {
        type: "block",
        list: [{
            type: "button",
            name: "add",
            value: ">>",
            offsetLeft: 25,
            offsetTop: 60
        }, {
            type: "button",
            name: "remove",
            value: "<<",
            offsetLeft: 25
        }]
        }, {
        type: "newcolumn"
    }, {
        type: "multiselect",
        label: "Blocked Contacts",
        name: "c_blocked",
        size: 8,
        options: [{
            value: "7",
            text: "Harriett Wickwire"
        }, {
            value: "8",
            text: "Fernando Frerichs"
        }, {
            value: "9",
            text: "Erik Couey"
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onButtonClick", function(name) {
        if (name == "add" || name == "remove") {
            changeContactState(name == "add");
        };
    });
 
}
 
function changeContactState(block) {
 
    var ida = (block ? "c_all": "c_blocked");
    var idb = (block ? "c_blocked": "c_all");
 
    var sa = myForm.getSelect(ida);
    var sb = myForm.getSelect(idb);
 
    var t = myForm.getItemValue(ida);
    if (t.length == 0)
        return;
    eval("var k={" + t.join(":true,") + ":true};");
 
    var w = 0;
    var ind = -1;
    while (w < sa.options.length) {
        if (k[sa.options[w].value]) {
            sb.options.add(new Option(sa.options[w].text, sa.options[w].value));
            sa.options.remove(w);
            ind = w;
        } else {
            w++;
        }
    }
 
    if (sa.options.length > 0 && ind >= 0) {
        if (sa.options.length > 0)
            sa.options[t.length > 1 ? 0: Math.min(ind, sa.options.length - 1)].selected = true;
    }
 
}</script>
 
 
    <div id="myForm" style="height:800px;"></div>