javascript - 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.