Question

我选择了

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

还有两个按钮

<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

如果你不使用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 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示例的想法相同，但是重新使用了一些战略代码。我需要让按钮始终在同一个选择元素上运行，名为“cols”。如果你想要更通用的东西，可以把“sel”作为moveUp（）和moveDown（）函数的参数。

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 5

我为此创建了一个jquery插件： https://github.com/UziTech/jquery.moveSelected.js

用法：

ADD_TEST(NAME TestMyCode COMMAND MyCode myparams) #produces output.txt
ADD_TEST(CheckOutput CompareFiles output.txt baseline.txt)

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

Answer 6

<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>

如何使用jquery通过按钮上下移动多选中的选定选项？

6 个答案: