通过jQuery向上和向下移动选择选项 [英] moving select options up and down via jquery
问题描述
有人知道任何其他代码允许您重新排序在IE8中完美工作的选定字段项目？
< select id =listmultiple =multiple >
< option value =wtf> bahaha< / option>
< option value =meh> mwaahaha< / option>
< / select>
< button id =mup>上移< /按钮>
< button id =mdown>向下移动< / button>
< a href =＃>添加项目< / a>
< a href =＃>删除项目< / a>
< script>
$（document）.ready（function（）{
$ b $（'＃mup'）。click（function（）{
moveUpItem （）;
））;
$（'＃mdown'）。click（function（）{
moveDownItem（）;
}）;
}）;
$ b $函数moveUpItem（）{
$（'＃list option：selected'）。each（function（）{
$（this）.insertBefore（$（this）。 prev（））;
}）;
函数moveDownItem（）{
$（'＃list option：selected'）。each（function（）{
$（this ）.insertAfter（$（this）.next（））;
}）;
code $ <$ $ p
解决方案您的代码改变选项工作正常。看起来IE8并没有处理点击事件的快速二次点击，而是期望一个双击
使用下面的测试代码，您会注意到在向下移动/向上移动时，IE8会写出以下内容被按下fast：
下移单击
下移双击
向下移动点击
向下移动双击
但是使用FF / Chrome时，会打印以下内容：
向下移动点击
向下移动点击
下移双击
向下移动点击
下移点击
下移双击
下面是代码I正在使用测试。我没有做任何测试，看看它是否是导致问题的jQuery的事件绑定器。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp：// www .w3.org / TR / HTML4 / strict.dtd>
< html>
< head>
< title>测试< /标题>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js>< /脚本>
< / head>
< body>
< select id =listmultiple =multiple>
< option value =option1>选项1< / option>
< option value =option2>选项2< / option>
< option value =option3>选项3< / option>
< / select>
< button id =mup>上移< /按钮>
< button id =mdown>向下移动< / button>
< script type =text / javascript>
var $ DEBUG = null;
$ b $（document）.ready（function（）
{
$ DEBUG = $（＃debug）;
$ DEBUG.append （Registering Events< br />）;
$（＃mup）。click（moveUpItem）;
$（＃mdown）。click（moveDownItem）;
$（＃mup）。bind（dblclick，function（）
{
$ DEBUG.append（上移双击< br />）;
$ b $ DEBUG.append（下移双击< br / >）;
}）;
}）;
函数moveUpItem（）
{
$ DEBUG.append（上移单击< br />）;
函数moveDownItem（）
{
$ DEBUG.append（下移单击< br />）;
}
< / script>
< div id =debugstyle =border：1px solid red>
< / div>
< / body>
< / html>
编辑：我可以确认是 这是IE8的问题。在$（document）.ready（）处理程序中交换特定于IE8的代码：
// $（＃mup ）。单击（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（上移双击< br />）;
}）;
// $（＃mdown）。bind（dblclick ，function（）
$（＃mdown）[0] .attachEvent（ondblclick，function（）
{
$ DEBUG.append（Move Down Double-Click< ;
））;
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..
Does anybody know any other code that allows you to reorder select field items that works perfectly in 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());
});
}
解决方案 Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
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.
<!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 is IE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
// $("#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 />");
});
这篇关于通过jQuery向上和向下移动选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
