Question

我有一个选项很少的下拉菜单。我想选择一个元素并上下移动它。我已经尝试过，到现在为止我可以删除所选项目，但我不知道如何粘贴它。

在我的例子中，如果我移动示例2并向上移动示例1应该在结尾处，示例2应该在顶部。

$(function () {
    function cutAndPaste(from, to) {

        return $(from + " option:selected").each(function () {
            this.outerHTML;
        }).remove();
    }

    $("#moveup").off("click").on("click", function () {
        cutAndPaste("#sourceSelect", "#destinationSelect");
    });
});

小提琴：http://jsfiddle.net/57f2drgj/

Answer 1

如果您要移动元素，则不必首先remove。 jQuery的insertBefore和insertAfter函数将移动它。

您可以使用.is(':first-child')和.is(':last-child')来测试所选选项是第一个还是最后一个。然后，您将其移至结尾或开头。

<强>段：

$('#moveup').click(function() {
  var opt = $('#sourceSelect option:selected');
    
  if(opt.is(':first-child')) {
    opt.insertAfter($('#sourceSelect option:last-child'));
  }
  else {
    opt.insertBefore(opt.prev());
  }
});

$('#movedown').click(function() {
  var opt = $('#sourceSelect option:selected');
  
  if(opt.is(':last-child')) {
    opt.insertBefore($('#sourceSelect option:first-child'));
  }
  else {
    opt.insertAfter(opt.next());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sourceSelect" id="sourceSelect" multiple="multiple" size="3">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
</select>


<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />

Answer 2

那样的东西？

$(function() {
    $("#moveup").click(function() {
        if($("#sourceSelect").prop("selectedIndex") > 0){
            var selOption = $("#sourceSelect").find(":selected");
            selOption.insertBefore(selOption.prev());
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sourceSelect" id="sourceSelect" multiple="multiple" size="3">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
</select>


<input type="button" name="moveup" id="moveup" value="^" />

在select元素中上下移动选项的方法

2 个答案: