javascript 通过 jquery 上下移动选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3312141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
moving select options up and down via jquery
提问by kamikaze_pilot
so I got this code working for Firefox and Chrome...what it does is it allows you to reorder the options within an HTML select form...but then when I tested the code via IE8, it's kind of patchy...it only works for the first few clicks and after that you have to click many times on the button for it to work..
所以我让这段代码适用于 Firefox 和 Chrome ......它的作用是让你在 HTML 选择表单中重新排序选项......但是当我通过 IE8 测试代码时，它有点不完整......它只适用于前几次点击，之后你必须多次点击按钮才能工作..
Does anybody know any other code that allows you to reorder select field items that works perfectly in 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());
});
}
采纳答案by TheCloudlessSky
Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the clickevent but rather expects a double clickto be handled.
您更改选项的代码工作正常。似乎 IE8 没有处理事件的“快速”第二次单击，click而是期望double click处理。
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Upis pressed "fast":
使用我下面的测试代码，您会注意到在 IE8Move Down/Up中按下“快速”时会写出以下内容：
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
但是使用 FF/Chrome 会打印以下内容：
Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click
Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.
这是我用来测试的代码。我还没有做任何测试来查看是否是 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:I can confirm it isIE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
编辑：我可以确认是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 />");
});
回答by Kheteswar
Example: to move 3rd option before 1st option, we can use below jquery:
示例：将第三个选项移动到第一个选项之前，我们可以使用以下 jquery：
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
回答by Federico Giust
I know this one is a bit old, but I recently made this simple jQuery plugin to be able to reorder elements in a multiple select element.
我知道这个有点旧，但我最近制作了这个简单的 jQuery 插件，以便能够在多选元素中重新排序元素。
Have a look and see if it helps for you, I tested in IE8,IE9,Chrome,FireFox,Opera.
看看它是否对你有帮助，我在 IE8、IE9、Chrome、FireFox、Opera 中进行了测试。
回答by warmth
I think this will give some ideas of how to do it, you can dynamically place any option before one known position just by knowing the values of both, the one to move and the one of the position:
我认为这将给出一些关于如何做到这一点的想法，你可以通过知道两者的值，移动的一个和一个位置的值，在一个已知的位置之前动态地放置任何选项：
How would you dynamically order an <option select> list using JQuery?
