所以我得到这个代码适用于Firefox和Chrome …它的作用是它允许您重新排序
HTML选择窗体中的选项…但是当我通过IE8测试代码,它是一种补丁…它仅适用于前几次点击,之后您必须在按钮上多次点击才能正常工作.
有没有人知道任何其他代码,允许您重新排序在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());
});
}
解决方法
您的更改选项的代码工作正常.看起来IE8并没有使用点击事件处理“快速”二次点击,而是期望双击被处理.
使用下面的测试代码,您会发现在IE8中按下“快”键时,会写出以下内容：
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的问题.在$(document).ready()处理程序中交换这个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 />");
});
