moviendo las opciones de selección hacia arriba y hacia abajo a través de jquery

así conseguí que este código funcionara para Firefox y Chrome ... lo que hace es que te permite reordenar las opciones en un formulario de selección HTML ... pero luego cuando probé el código a través de IE8, es un poco desigual ... solo funciona para los primeros clics y luego hay que hacer clic muchas veces en el botón para que funcione ...moviendo las opciones de selección hacia arriba y hacia abajo a través de jquery

¿Alguien conoce algún otro código que le permita reordenar elementos de campo seleccionados que funcionan perfectamente en IE8?

<select id="list" multiple="multiple"> 
    <option value="wtf">bahaha</option> 
     <option value="meh">mwaahaha</option> 

</select> 
<button id="mup">Move Up</button> 
<button id="mdown">Move Down</button> 
<a href="#">Add Item</a> 
<a href="#">Remove item</a> 

<script> 

$(document).ready(function(){ 

$('#mup').click(function(){ 

    moveUpItem(); 

}); 

$('#mdown').click(function(){ 

    moveDownItem(); 

}); 


}); 

function moveUpItem(){ 
    $('#list option:selected').each(function(){ 
    $(this).insertBefore($(this).prev()); 
    }); 
} 

function moveDownItem(){ 

    $('#list option:selected').each(function(){ 
    $(this).insertAfter($(this).next()); 
    }); 

}

Fuente

2010-07-22 kamikaze_pilot

realmente no relacionadas con su pregunta, pero usted puede mejorar su 'moveDownItem)' función (para manejar con seguridad un cuadro de selección que permite múltiples selecciones simplemente invirtiendo las opciones antes de que el 'cada uno()', tan parecido a '$ ($ ('# opción de lista: seleccionado'). get(). reverse()). each (function() {// etc ..}' –

Bien visto @MickByrne – Adi

Su código para cambiar las opciones funciona bien. Parece que IE8 no está manejando un segundo clic "rápido" con el evento click sino que espera que se maneje un double click.

Usando mi código de prueba a continuación, se dará cuenta de que en IE8, escribe el siguiente cuando se pulsa Move Down/Up "rápida":

Move Down Click 
Move Down Double-Click 
Move Down Click 
Move Down Double-Click

Pero con FF/Chrome se imprime el siguiente:

Move Down Click 
Move Down Click 
Move Down Double-Click 
Move Down Click 
Move Down Click 
Move Down Double-Click

Aquí está el código que estoy usando para probar. No he hecho ninguna prueba para ver si son las carpetas de eventos de jQuery las que están causando los problemas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head>  
    <title>Test</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 

</head> 
<body> 

<select id="list" multiple="multiple"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
</select> 

<button id="mup">Move Up</button> 
<button id="mdown">Move Down</button> 

<script type="text/javascript"> 

var $DEBUG = null; 

$(document).ready(function() 
{ 
    $DEBUG = $("#debug"); 

    $DEBUG.append("Registering Events<br />"); 

    $("#mup").click(moveUpItem); 
    $("#mdown").click(moveDownItem); 
    $("#mup").bind("dblclick", function() 
    { 
     $DEBUG.append("Move Up Double-Click<br />"); 
    }); 
    $("#mdown").bind("dblclick", function() 
    { 
     $DEBUG.append("Move Down Double-Click<br />"); 
    }); 

}); 

function moveUpItem() 
{ 
    $DEBUG.append("Move Up Click<br />"); 
} 

function moveDownItem() 
{ 
    $DEBUG.append("Move Down Click<br />"); 
} 

</script> 

<div id="debug" style="border: 1px solid red"> 
</div> 

</body> 

</html>

EDIT: puedo confirmar que es IE8 que es el problema. Cambiar el código IE8-específica en el ready $ (document)() manejador:

// $("#mup").click(moveUpItem); 
$("#mup")[0].attachEvent("onclick", moveUpItem); 
// $("#mdown").click(moveDownItem); 
$("#mdown")[0].attachEvent("onclick", moveUpItem); 
// $("#mup").bind("dblclick", function() 
$("#mup")[0].attachEvent("ondblclick", function() 
{ 
    $DEBUG.append("Move Up Double-Click<br />"); 
}); 
// $("#mdown").bind("dblclick", function() 
$("#mdown")[0].attachEvent("ondblclick", function() 
{ 
    $DEBUG.append("Move Down Double-Click<br />"); 
});

Fuente

2010-07-23 00:28:01 TheCloudlessSky

creo que esto le dará algunas ideas de cómo hacerlo, puede dinámicamente colocar cualquier opción antes de una posición conocida con sólo conocer los valores de los dos, el que se mueve y el de la posición:

How would you dynamically order an <option select> list using JQuery?

Fuente

2012-11-13 23:39:01 warmth

Ejemplo: para mover tercera opción antes de primera opción, podemos utilizar jQuery a continuación:

Fuente

2013-07-21 08:04:02 Kheteswar

Sé que este es un poco antiguo, pero recientemente hice este plugin jQuery simple para poder reordenar elementos en un elemento de selección múltiple.

Eche un vistazo y vea si le sirve de ayuda, probé en IE8, IE9, Chrome, FireFox, Opera.

http://fedegiust.github.io/selectReorder/

Fuente

2014-02-06 18:23:16

moviendo las opciones de selección hacia arriba y hacia abajo a través de jquery

Respuesta

Cuestiones relacionadas