jqueryを使用してボタンでマルチセレクションの選択したオプションを上下に移動するにはどうすればよいですか？

Question

は、私が選択してい

<select multiple id="select2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

と2つのボタン

<input type="button" value="Up" onclick="up()"> 
<input type="button" value="Down" onclick="down()"> 

どのようにして上下にjQueryを使ってボタンで複数選択で選択したオプションを移動することができますか？

Answer 1

更新：選択した複数のオプションのための固定コード、@patrick dw's suggestionに基づきます。

$(document).ready(function(){ 
    $('input[type="button"]').click(function(){ 
     var $op = $('#select2 option:selected'), 
      $this = $(this); 
     if($op.length){ 
      ($this.val() == 'Up') ? 
       $op.first().prev().before($op) : 
       $op.last().next().after($op); 
     } 
    }); 
}); 

Test it here »

インラインonclick=""イベントリスナーを使用する必要はありません。 jQueryは、プレゼンテーションを機能から分離する完全な制御を行います。

Answer 2

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('li').click(function() { 
     // the clicked LI 
     var clicked = $(this); 

     // all the LIs above the clicked one 
     var previousAll = clicked.prevAll(); 

     // only proceed if it's not already on top (no previous siblings) 
     if(previousAll.length > 0) { 
     // top LI 
     var top = $(previousAll[previousAll.length - 1]); 

     // immediately previous LI 
     var previous = $(previousAll[0]); 

     // how far up do we need to move the clicked LI? 
     var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop'); 

     // how far down do we need to move the previous siblings? 
     var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight()); 

     // let's move stuff 
     clicked.css('position', 'relative'); 
     previousAll.css('position', 'relative'); 
     clicked.animate({'top': -moveUp}); 
     previousAll.animate({'top': moveDown}, {complete: function() { 
      // rearrange the DOM and restore positioning when we're done moving 
      clicked.parent().prepend(clicked); 
      clicked.css({'position': 'static', 'top': 0}); 
      previousAll.css({'position': 'static', 'top': 0}); 
     }}); 
     } 
    }); 
    }); 
</script> 

<ul> 
<li><a>Hank</a></li> 
<li><a>Alice</a></li> 
<li><a>Tom</a></li> 
<li><a>Ashlee</a></li> 
</ul> 

Answer 3

function up() { 
    var selected = $("#select2").find(":selected"); 
    var before = selected.prev(); 
    if (before.length > 0) 
     selected.detach().insertBefore(before); 
} 

function down() { 
    var selected = $("#select2").find(":selected"); 
    var next = selected.next(); 
    if (next.length > 0) 
     selected.detach().insertAfter(next); 
} 

Answer 4

あなたはここにjqueryの

function moveUp(){ 
    var select = document.getElementById("columnOrder"); 
    var options = select && select.options; 
    var selected = []; 

    for (var i = 0, iLen = options.length; i < iLen; i++) { 
     if (options[i].selected) { 
      selected.push(options[i]); 
     } 
    } 

    for (i = 0, iLen = selected.length; i < iLen; i++) { 
     var index = selected[i].index; 

     if(index == 0){ 
      break; 
     } 

     var temp = selected[i].text; 
     selected[i].text = options[index - 1].text; 
     options[index - 1].text = temp; 

     temp = selected[i].value; 
     selected[i].value = options[index - 1].value; 
     options[index - 1].value = temp; 

     selected[i].selected = false; 
     options[index - 1].selected = true; 
    } 
} 

function moveDown(){ 
    var select = document.getElementById("columnOrder"); 
    var options = select && select.options; 
    var selected = []; 

    for (var i = 0, iLen = options.length; i < iLen; i++) { 
     if (options[i].selected) { 
      selected.push(options[i]); 
     } 
    } 

    for (i = selected.length - 1, iLen = 0; i >= iLen; i--) { 
     var index = selected[i].index; 

     if(index == (options.length - 1)){ 
      break; 
     } 

     var temp = selected[i].text; 
     selected[i].text = options[index + 1].text; 
     options[index + 1].text = temp; 

     temp = selected[i].value; 
     selected[i].value = options[index + 1].value; 
     options[index + 1].value = temp; 

     selected[i].selected = false; 
     options[index + 1].selected = true; 
    } 
} 

Answer 5

を使用しない場合は、以前に掲示非jqueryの例として、いくつかの戦略的なコードの再利用と同じ考え方です。私の必要性は、ボタンを常に "cols"という名前の同じ選択要素で操作させることでした。 moveUp（）とmoveDown（）関数のパラメータとして "sel"を置くことができます。

function moveUp() { 
    var sel = document.getElementById("cols"); 
    var i1=0, i2=1; 
    while (i2 < sel.options.length) { 
     swapIf(sel,i1++,i2++); 
    } 
} 
function moveDown() { 
    var sel = document.getElementById("cols"); 
    var i1=sel.options.length-1, i2=i1-1; 
    while (i1 > 0) { 
     swapIf(sel,i1--,i2--); 
    } 
} 
var swapVar = ''; 
function swapIf(sel,i1,i2) { 
    if (! sel[i1].selected && sel[i2].selected) { 
     swapVar = sel[i2].text; 
     sel[i2].text = sel[i1].text; 
     sel[i1].text = swapVar; 
     swapVar = sel[i2].value; 
     sel[i2].value = sel[i1].value; 
     sel[i1].value = swapVar; 
     sel[i1].selected = true; 
     sel[i2].selected = false; 
    } 
} 

Answer 6

私はこのためにjQueryプラグインを作成： https://github.com/UziTech/jquery.moveSelected.js

使用：あなたが移動すると、どこのボタンがあるん `option`

$("button#up").click(function(){ 
    $("select").moveSelectedUp(); 
}); 
$("button#down").click(function(){ 
    $("select").moveSelectedDown(); 
}); 

http://jsfiddle.net/UziTech/qr5qfhgg/