在选定元素中上下移动选项的方式

Way to move options up and down in a select element

本文关键字：移动 选项 方式 上下 元素      更新时间：2024-04-16

我有一个包含几个选项的下拉列表。我想选择一个元素并将其上下移动。我已经尝试过了，到目前为止我可以删除所选项目，但我不确定如何粘贴它。

就像在我的例子中，如果我移动例子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/

如果要移动一个元素，则不必首先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" />

类似的东西？

$(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="^" />

相关文章：