przenoszenie wybranych opcji w górę iw dół za pomocą jquery

, więc otrzymałem ten kod działający w Firefoksie i Chrome ... to, co robi, pozwala zmienić kolejność opcji w formularzu HTML ... ale kiedy przetestowałem kod przez IE8 jest to trochę niejednolite ... działa tylko na kilka pierwszych kliknięć, a potem trzeba kliknąć wiele razy przycisk, aby zadziałało.przenoszenie wybranych opcji w górę iw dół za pomocą jquery

Czy ktoś zna inny kod, który pozwala zmienić kolejność wybranych elementów pól, które działają idealnie w 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()); 
    }); 

}

Źródło

2010-07-22 kamikaze_pilot

naprawdę nie związane z pytaniem, ale można poprawić 'moveDownItem()' funkcję bezpiecznie obsłużyć wybierz pole, które pozwala na wiele wyborów przez proste odwrócenie opcje przed 'each()', tak jak '$ ($ ('# list option: selected'). get(). reverse()). each (function() {// etc ..}' –

Ładnie spotted @MickByrne – Adi

Twój kod zmiany opcji działa poprawnie. Wygląda na to, że IE8 nie radzi sobie z "szybkim" drugim kliknięciem przy zdarzeniu click, ale raczej oczekuje, że będzie obsługiwany double click.

Korzystanie poniżej mojego kodu testowego, można zauważyć, że w IE8 pisze następujące po Move Down/Up naciśnięciu „szybki”:

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

Ale z FF/Chrome następuje drukowane:

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

Oto kod, którego używam do przetestowania. Nie zrobiłem żadnych testów, aby sprawdzić, czy przyczyną problemów są błędy związane z jQuery.

<!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: mogę potwierdzić to IE8, że jest problem. Zamienić ten IE8-specyficzny kod w $ (document) .ready() Ładowarka:

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

Źródło

2010-07-23 00:28:01 TheCloudlessSky

Myślę, że to daje jakieś pomysły jak to zrobić, można dynamicznie umieszczać żadnych opcji przed jednym znanym położeniu tuż przy znając wartości zarówno jedno, aby przenieść i jedną z pozycji:

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

Źródło

2012-11-13 23:39:01 warmth

Przykład: przenieść 3rd opcję przed 1 opcji, możemy skorzystać z poniższego jQuery:

Źródło

2013-07-21 08:04:02 Kheteswar

Wiem, że ten jest trochę stary, ale ostatnio zrobiłem tę prostą wtyczkę jQuery, aby móc zmienić kolejność elementów w wielu elementach.

Zobacz i sprawdź, czy ci to pomaga, testowałem w IE8, IE9, Chrome, FireFox, Opera.

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

Źródło

2014-02-06 18:23:16