перемещение выбора вариантов вверх и вниз с помощью jquery - PullRequest
Новая
       7

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

11 голосов
/ 22 июля 2010

, поэтому я получил этот код, работающий для 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());
  });

 }

Ответы [ 4 ]

5 голосов
/ 23 июля 2010

Ваш код для изменения параметров работает нормально. Похоже, 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. Поменяйте местами этот специфичный для 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 />");
});
3 голосов
/ 21 июля 2013

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

$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
0 голосов
/ 06 февраля 2014

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

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

0 голосов
/ 14 ноября 2012

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

Как бы вы динамически заказатьсписок с использованием JQuery?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...