通过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