bewegen wählen Optionen nach oben und unten über Jquery

so habe ich diesen Code für Firefox und Chrome funktioniert ... was es tut, ist es ermöglicht es Ihnen, die Optionen innerhalb eines HTML-Formulars neu anordnen ... aber dann, wenn ich den Code getestet über IE8, es ist irgendwie lückenhaft ... es funktioniert nur für die ersten paar Klicks und danach müssen Sie oft auf die Schaltfläche klicken, damit es funktioniert ..bewegen wählen Optionen nach oben und unten über Jquery

Kennt jemand anderen Code, der Ihnen erlaubt Reorder-Auswahl von Feldelementen, die perfekt in IE8 funktioniert?

<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()); 
    }); 

}

Quelle

2010-07-22 kamikaze_pilot

Nicht wirklich zu Ihrer Frage, aber Sie können Ihre 'moveDownItem()' Funktion, um sicher zu handhaben eine Auswahlbox, die durch einfaches Umdrehen der Optionen vor dem 'jeder()' für eine Mehrfachauswahl ermöglicht zu verbessern, so wie '$ ($ ('# list option: selected'). get(). reverse()). je (function() {// etc ..}' –

Schön gefleckt @MickByrne – Adi

Ihr Code zum Ändern der Optionen funktioniert einwandfrei. Es scheint, IE8 nicht einen "schnellen" Sekundenklick mit dem click Ereignis behandelt, sondern eher eine double click behandelt wird.

unter meinem Testcode verwenden, werden Sie feststellen, dass in IE8 aus dem schreibt Move Down/Up Folgendes, wenn "schnelle" gedrückt wird:

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

Aber mit FF/Chrome der gedruckten wird wie folgt:

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

Hier ist der Code, den ich zum Testen verwende. Ich habe keine Tests durchgeführt, um zu sehen, ob die Ereignisbinder von jQuery die Probleme verursachen.

<!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: Ich kann bestätigen es ist IE8, dass das Problem ist. Tauschen Sie diesen IE8-spezifischen Code in dem $ (document) .ready() -Prozedur:

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

Quelle

2010-07-23 00:28:01 TheCloudlessSky

ich denke, das wird ein paar Ideen geben, wie es zu tun, Sie dynamisch jede Option vor einer bekannten Position platzieren können nur durch die Werte sowohl zu wissen, die man zu bewegen und die eine der Position:

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

Quelle

2012-11-13 23:39:01 warmth

Beispiel: dritte Option vor dem 1. Option zu bewegen, können wir unter jquery verwenden:

Quelle

2013-07-21 08:04:02 Kheteswar

Ich weiß, dass dieser ein bisschen alt ist, aber ich habe vor kurzem dieses einfache jQuery-Plugin gemacht, um Elemente in einem multiple select-Element neu anordnen zu können.

Schauen Sie, ob es für Sie hilft, habe ich in IE8, IE9, Chrome, FireFox, Opera getestet.

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

Quelle

2014-02-06 18:23:16

bewegen wählen Optionen nach oben und unten über Jquery

Antwort

Verwandte Themen