通过jquery上下移动选择选项

Question

通过jquery上下移动选择选项

kam*_*lot 12 javascript forms jquery select

所以我得到这个代码适用于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());
  });

 }

Run Code Online (Sandbox Code Playgroud)

Answer 1

The*_*Sky 6

您更改选项的代码工作正常.似乎IE8没有处理事件的"快速"第二次点击,click而是期望double click处理.

使用下面的测试代码,您会注意到在IE8 Move Down/Up中按下"fast" 时会写出以下内容:

Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click

Run Code Online (Sandbox Code Playgroud)

但是使用FF/Chrome可以打印以下内容:

Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click

Run Code Online (Sandbox Code Playgroud)

这是我用来测试的代码.我没有做过任何测试,看看它是否是导致问题的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>

Run Code Online (Sandbox Code Playgroud)

编辑:我可以确认这是 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 />");
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，7 月前
查看次数：	16555 次
最近记录：	12 年，1 月前