在选择元素中上下移动选项的方法[重复]答案

【问题标题】：Way to move options up and down in a select element [duplicate]在选择元素中上下移动选项的方法[重复]
【发布时间】：2015-04-25 05:56:19
【问题描述】：

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

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

【问题讨论】：

你为什么使用off()，然后使用on()，你的to参数在你的cutAndPaste函数中有什么意义？
stackoverflow.com/questions/6713702/…
我可能弄错了，但我认为this.outerHTML; 根本没有做任何事情（意味着您在each 语句中调用的函数毫无意义）

标签： javascript jquery html

【解决方案1】：

类似的东西？

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

【讨论】：

这很好，你甚至不需要if 语句。如果没有先前的兄弟，insertBefore 将保留它。
谢谢 :) 如果你愿意，你可以用同样的方式“放下”。只需检查选定的选项不是最后一个。
再次，您无需费心检查。使用此代码selOption.insertAfter(selOption.next());，如果您选择最后一个选项，则没有next 兄弟，insertAfter 不会做任何事情。
感谢@AlexanderDayan，但就我而言，如果我将示例 2 向上移动，示例 1 应该位于底部。它不应该在 1 和 2 之间交换 ??
如果您将示例 3 向下移动，它应该移动到顶部，方法是将示例 2 放在底部，将示例 1 放在中间。

【解决方案2】：

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

【讨论】：