通過jquery向上和向下移動選擇選項

所以我得到這段代碼適用於Firefox和Chrome ......它所做的是它允許您在HTML選擇表單中重新排序選項......但是當我測試代碼時通過IE8，它是一種片狀...它只適用於前幾個點擊，然後，你必須單擊按鈕上的許多次它的工作。通過jquery向上和向下移動選擇選項

有沒有人知道任何其他代碼，可以讓你重新排序在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()); 
    }); 

}

來源

2010-07-22 kamikaze_pilot

不是真的關係到你的問題，但你可以通過之前的'每（）'簡單地顛倒的選項提高你的'moveDownItem（）'函數來安全地處理一個選擇框，允許多項選擇，所以像'$（$（'＃list option：selected'）。get（）。reverse（））。each（function（）{// etc ..}' – 2012-03-06 03:03:09

很好的發現@MickByrne – Adi 2015-05-14 16:05:21

您更改選項的代碼正常工作。看起來IE8並沒有處理與click事件的「快速」二次點擊，而是預計要處理一個double click。

使用我下面的測試代碼，你會發現，在IE8寫出時Move Down/Up按下「快」下面：

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

但隨着FF/Chrome瀏覽器打印以下：

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

下面是我用來測試的代碼。我沒有做任何測試，看看它是否是導致問題的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>

編輯：我可以證實是 IE8這就是問題所在。在$（文件）。就緒SWAP這個IE8特定的代碼（）處理：

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

來源

2010-07-23 00:28:01 TheCloudlessSky