¿Cómo puedo mover la opción seleccionada en multiselección hacia arriba y hacia abajo mediante botones usando jquery?

Question

que tienen seleccione

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

y dos botones

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

¿Cómo puedo mover la opción seleccionada en multiselect arriba y abajo por los botones usando jQuery?

Answer 1

Actualización: Código fijo para múltiples opciones seleccionadas, basado en @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 hay necesidad de utilizar en línea onclick="" detectores de eventos. jQuery toma el control total de separar la presentación de la funcionalidad.

Answer 2

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('li').click(function() { 
     // the clicked LI 
     var clicked = $(this); 

     // all the LIs above the clicked one 
     var previousAll = clicked.prevAll(); 

     // only proceed if it's not already on top (no previous siblings) 
     if(previousAll.length > 0) { 
     // top LI 
     var top = $(previousAll[previousAll.length - 1]); 

     // immediately previous LI 
     var previous = $(previousAll[0]); 

     // how far up do we need to move the clicked LI? 
     var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop'); 

     // how far down do we need to move the previous siblings? 
     var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight()); 

     // let's move stuff 
     clicked.css('position', 'relative'); 
     previousAll.css('position', 'relative'); 
     clicked.animate({'top': -moveUp}); 
     previousAll.animate({'top': moveDown}, {complete: function() { 
      // rearrange the DOM and restore positioning when we're done moving 
      clicked.parent().prepend(clicked); 
      clicked.css({'position': 'static', 'top': 0}); 
      previousAll.css({'position': 'static', 'top': 0}); 
     }}); 
     } 
    }); 
    }); 
</script> 

<ul> 
<li><a>Hank</a></li> 
<li><a>Alice</a></li> 
<li><a>Tom</a></li> 
<li><a>Ashlee</a></li> 
</ul> 

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

si no se utiliza 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 5

aquí es la misma idea que el ejemplo no jQuery publicado anteriormente, pero con algo de código re-uso estratégico. Mi necesidad era que los botones siempre funcionaran en el mismo elemento seleccionado, llamado "cols". Puede poner "sel" como parámetro de las funciones moveUp() y moveDown() si quiere algo más genérico.

function moveUp() { 
    var sel = document.getElementById("cols"); 
    var i1=0, i2=1; 
    while (i2 < sel.options.length) { 
     swapIf(sel,i1++,i2++); 
    } 
} 
function moveDown() { 
    var sel = document.getElementById("cols"); 
    var i1=sel.options.length-1, i2=i1-1; 
    while (i1 > 0) { 
     swapIf(sel,i1--,i2--); 
    } 
} 
var swapVar = ''; 
function swapIf(sel,i1,i2) { 
    if (! sel[i1].selected && sel[i2].selected) { 
     swapVar = sel[i2].text; 
     sel[i2].text = sel[i1].text; 
     sel[i1].text = swapVar; 
     swapVar = sel[i2].value; 
     sel[i2].value = sel[i1].value; 
     sel[i1].value = swapVar; 
     sel[i1].selected = true; 
     sel[i2].selected = false; 
    } 
} 

Answer 6

he creado un plugin de jQuery para esto: https://github.com/UziTech/jquery.moveSelected.js

uso:

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

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