通過jquery上下移動選擇選項

Question

所以我得到這個代碼適用於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());
  });

 }

Answer 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 />");
});

Answer 2

示例：要在第一個選項之前移動第3個選項，我們可以使用下面的jquery：

$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));

Answer 3

我認為這會給出一些如何做的想法，你可以通過知道兩者的值，即要移動的位置和其中一個位置，在一個已知位置之前動態放置任何選項：

您如何使用JQuery動態訂購<option select>列表？

Answer 4

我知道這個有點舊，但我最近制作了這個簡單的jQuery插件，能夠重新排序多個select元素中的元素。

看看它是否對你有幫助，我測試了IE8，IE9，Chrome，FireFox，Opera。

http://fedegiust.github.io/selectReorder/

通過jquery上下移動選擇選項

問題描述

4 個解決方案

解決方案1
6 已采納 2010-07-23 00:28:01

解決方案2
4 2013-07-21 08:04:02

解決方案3
1 2012-11-13 23:39:01

解決方案4
1 2014-02-06 18:23:16

通過jquery上下移動選擇選項

問題描述

4 個解決方案

解決方案1 6 已采納 2010-07-23 00:28:01

解決方案2 4 2013-07-21 08:04:02

解決方案3 1 2012-11-13 23:39:01

解決方案4 1 2014-02-06 18:23:16

解決方案1
6 已采納 2010-07-23 00:28:01

解決方案2
4 2013-07-21 08:04:02

解決方案3
1 2012-11-13 23:39:01

解決方案4
1 2014-02-06 18:23:16