通过jquery上下移动选择选项
Posted
技术标签:
【中文标题】通过jquery上下移动选择选项【英文标题】：moving select options up and down via jquery 【发布时间】：2011-03-19 17:38:47 【问题描述】：所以我得到了适用于 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());
);
【问题讨论】：
与您的问题并不真正相关，但您可以改进您的moveDownItem() 功能，以安全地处理允许多项选择的选择框，只需反转 each() 之前的选项，例如 @987654324 @
很好地发现了@MickByrne
【参考方案1】：
您更改选项的代码运行良好。似乎 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 是问题所在。在 $(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 />");
);
【讨论】：
【参考方案2】：示例： 要将第三个选项移到第一个选项之前，我们可以使用下面的 jquery：
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
【讨论】：
【参考方案3】：我认为这将提供一些关于如何做到这一点的想法，您可以通过知道两者的值来动态地将任何选项放在一个已知位置之前，即要移动的位置和位置之一：
How would you dynamically order an <option select> list using JQuery?
【讨论】：
【参考方案4】：我知道这个有点老了，但我最近制作了这个简单的 jQuery 插件，以便能够对多选元素中的元素重新排序。
看看对你有没有帮助，我在IE8,IE9,Chrome,FireFox,Opera中测试过。
http://fedegiust.github.io/selectReorder/
【讨论】：
以上是关于通过jquery上下移动选择选项的主要内容，如果未能解决你的问题，请参考以下文章
jquery 移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小