How can I move selected option in multiselect up and down by buttons using jquery?

Question

I have select

<select multiple id="select2"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option>
</select>

And two buttons

<input type="button" value="Up" onclick="up()">
<input type="button" value="Down" onclick="down()">

How can I move selected option in multiselect up and down by buttons using jquery?

Answer 1

Update: Fixed code for multiple options selected, based on @patrick dw's suggestion.

$(document).ready(function(){
    $('input[type="button"]').click(function(){
        var $op = $('#select2 option:selected'),
            $this = $(this);
        if($op.length){
            ($this.val() == 'Up') ? 
                $op.first().prev().before($op) : 
                $op.last().next().after($op);
        }
    });
});

Test it here »

No need to use inline onclick="" event listeners. jQuery takes full control of separating presentation from functionality.

Answer 2

if you do not use jquery

function moveUp(){
    var select = document.getElementById("columnOrder");
    var options = select && select.options;
    var selected = [];

    for (var i = 0, iLen = options.length; i < iLen; i++) {
        if (options[i].selected) {
            selected.push(options[i]);
        }
    }

    for (i = 0, iLen = selected.length; i < iLen; i++) {
        var index = selected[i].index;

        if(index == 0){
            break;
        }

        var temp = selected[i].text;
        selected[i].text = options[index - 1].text;
        options[index - 1].text = temp;

        temp = selected[i].value;
        selected[i].value = options[index - 1].value;
        options[index - 1].value = temp;

        selected[i].selected = false;
        options[index - 1].selected = true;
    }
}

function moveDown(){
    var select = document.getElementById("columnOrder");
    var options = select && select.options;
    var selected = [];

    for (var i = 0, iLen = options.length; i < iLen; i++) {
        if (options[i].selected) {
            selected.push(options[i]);
        }
    }

    for (i = selected.length - 1, iLen = 0; i >= iLen; i--) {
        var index = selected[i].index;

        if(index == (options.length - 1)){
            break;
        }

        var temp = selected[i].text;
        selected[i].text = options[index + 1].text;
        options[index + 1].text = temp;

        temp = selected[i].value;
        selected[i].value = options[index + 1].value;
        options[index + 1].value = temp;

        selected[i].selected = false;
        options[index + 1].selected = true;
    }
}

Answer 3

function up() {
    var selected = $("#select2").find(":selected");
    var before = selected.prev();
    if (before.length > 0)
        selected.detach().insertBefore(before);
}

function down() {
    var selected = $("#select2").find(":selected");
    var next = selected.next();
    if (next.length > 0)
        selected.detach().insertAfter(next);
}

Answer 4

I created a jquery plugin for this: https://github.com/UziTech/jquery.moveSelected.js

usage:

$("button#up").click(function(){
  $("select").moveSelectedUp();
});
$("button#down").click(function(){
  $("select").moveSelectedDown();
});

http://jsfiddle.net/UziTech/qr5qfhgg/