Multiselect

a Multiselect where you can change order, add and delete from.

by mowglisanu

HTML

<input id="label" type="text" value=""><input type="button" id="save" value="save">
<br />
<select size="5" id="select2" class="selector" multiple> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option>
</select>
<br />
<input type="button" class="btn move" value="up">
<input type="button" class="btn move" value="down">
<br />
<input type="button" class="btn" id="add" value="add">
<input type="button" class="btn" id="del" value="delete">

CSS

.selector {
width: 140px;
}

.btn {
width:70px;
}

JavaScript

require([
    "dojo/dom",
    "dojo/on",
    "dojo/date/locale",
    "dojo/domReady!"
    ], function(dom, on, locale) {

    var count = 4;
    var listbox = dojo.byId('select2');

    var move = function() {
        var selIndex = listbox.selectedIndex;

        if (-1 == selIndex) {
            alert("Please select an option to move.");
            return;
        }

        var increment = (this.value == 'up') ? -1 : 1;
        if ((selIndex + increment) < 0 || (selIndex + increment) > (listbox.options.length - 1)) {
            return;
        }

        var selValue = listbox.options[selIndex].value;
        var selText = listbox.options[selIndex].text;
        listbox.options[selIndex].value = listbox.options[selIndex + increment].value;
        listbox.options[selIndex].text = listbox.options[selIndex + increment].text;

        listbox.options[selIndex + increment].value = selValue;
        listbox.options[selIndex + increment].text = selText;

        listbox.selectedIndex = selIndex + increment;
    };

    var addOpt = function() {
        var elOptNew = document.createElement('option');
        elOptNew.text = 'New_'+count;
        elOptNew.value = count++;

        try {
            listbox.add(elOptNew, null); // standards compliant; doesn't work in IE
        }
        catch (ex) {
            listbox.add(elOptNew); // IE only
        }
    };

    var delOpt = function() {
        var i;
        for (i = listbox.length - 1; i >= 0; i--) {
            if (listbox.options[i].selected) {
                listbox.remove(i);
            }
        }
        dojo.byId('label').value = ""; 
    };

    var edit = function() {
        var selIndex = listbox.selectedIndex;
        dojo.byId('label').value = listbox.options[selIndex].text;
    };

    var save = function() {
        var selIndex = listbox.selectedIndex;
        if (selIndex == -1) { return; }
        listbox.options[selIndex].text = dojo.byId('label').value;
    };


   ...