spostamento delle opzioni di selezione su e giù tramite jquery

così ho ottenuto questo codice funzionante per Firefox e Chrome ... quello che fa è che ti permette di riordinare le opzioni all'interno di un modulo di selezione HTML ... ma poi quando ho provato il codice tramite IE8, è un po 'irregolare ... funziona solo per i primi clic e dopo di ciò devi fare più clic sul pulsante per farlo funzionare.spostamento delle opzioni di selezione su e giù tramite jquery

Qualcuno conosce un altro codice che ti permette di riordina gli elementi di campo selezionati che funzionano perfettamente in 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()); 
    }); 

}

fonte

2010-07-22 kamikaze_pilot

Non proprio legato alla tua domanda, ma si può migliorare la vostra) 'funzione' moveDownItem (per gestire in modo sicuro una casella di selezione che permette di selezioni multiple, semplicemente invertendo le opzioni prima del 'ciascuno()', così come '$ ($ ('# lista opzione: selezionata'). get(). reverse()). each (function() {// etc ..}' –

Notato bene @MickByrne – Adi

Il codice per modificare le opzioni funziona correttamente. Sembra che IE8 non stia gestendo un secondo clic "veloce" con l'evento click ma si aspetta piuttosto che venga gestito un double click.

Usando il mio codice di prova di seguito, si noterà che in IE8 scrive quanto segue quando viene premuto Move Down/Up "fast":

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

Ma con FF/Chrome quanto segue viene stampato:

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

Ecco il codice che sto usando per testare. Non ho fatto alcun test per vedere se sono i raccoglitori di eventi di jQuery che stanno causando i problemi.

<!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: posso confermare è IE8 che è il problema. Scambia questo codice IE8-specifico nel .ready $ (document)() gestore:

// $("#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 />"); 
});

fonte

2010-07-23 00:28:01 TheCloudlessSky

penso che questo vi darà alcune idee su come farlo, è possibile in modo dinamico inserire qualsiasi opzione prima di una posizione nota semplicemente conoscendo i valori di entrambi, quella di circolare e di quello della posizione:

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

fonte

2012-11-13 23:39:01 warmth

Esempio: per spostare terza opzione prima prima opzione, possiamo usare sotto jQuery:

fonte

2013-07-21 08:04:02 Kheteswar

So che questo è un po 'vecchio, ma di recente ho realizzato questo semplice plugin jQuery per poter riordinare gli elementi in un elemento di selezione multipla.

Dai un'occhiata e vedi se ti aiuta, ho provato in IE8, IE9, Chrome, FireFox, Opera.

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

fonte

2014-02-06 18:23:16

spostamento delle opzioni di selezione su e giù tramite jquery

risposta

Problemi correlati