Перемещение опций выбора вверх и вниз с помощью jquery

поэтому я получил этот код для работы в Firefox и Chrome... что он делает, это позволяет вам изменять порядок в форме выбора HTML... но потом, когда я протестировал код через IE8, он несколько размыт...it работает только для первых нескольких кликов, после чего вам нужно многократно нажимать кнопку, чтобы она работала.

Кто-нибудь знает какой-либо другой код, который позволяет вам переупорядочивать элементы поля, которые отлично работают в 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());
  });

 }

Ответы

Ответ 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>

EDIT: Я могу подтвердить, что это проблема IE8. Поменяйте этот код, специфичный для IE8, в обработчике $(document).ready():

// $("#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

Пример: для перемещения 3-го параметра до 1-го варианта, мы можем использовать ниже jquery:

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

Ответ 4

Я знаю, что это немного устарело, но я недавно сделал этот простой плагин jQuery, чтобы иметь возможность переупорядочивать элементы в нескольких элементах выбора.

Посмотрите и посмотрите, помогает ли это вам, я тестировал в IE8, IE9, Chrome, FireFox, Opera.

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