Làm cách nào tôi có thể di chuyển tùy chọn đã chọn trong nhiều lựa chọn lên và xuống bằng các nút bằng cách sử dụng jquery?

Question

Tôi có chọn

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

Và hai nút

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

Làm thế nào tôi có thể di chuyển tùy chọn được chọn trong multiselect lên xuống bằng nút sử dụng jquery?

Answer 1

Cập nhật: Cố định mã cho nhiều tùy chọn đã chọn, dựa trên @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 »

Không cần phải sử dụng inline onclick="" nghe sự kiện. jQuery kiểm soát hoàn toàn việc tách bản trình bày khỏi chức năng.

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

nếu bạn không sử dụng 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

đây là ý tưởng giống như trước đó posted dụ phi jquery, nhưng với một số mã tái sử dụng chiến lược. Nhu cầu của tôi là để các nút luôn hoạt động trên cùng một phần tử chọn, có tên là "cols". Bạn có thể đặt "sel" làm tham số của các hàm moveUp() và moveDown() nếu bạn muốn một cái gì đó chung chung hơn.

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

Tôi tạo ra một plugin jquery cho việc này: https://github.com/UziTech/jquery.moveSelected.js

sử dụng:

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

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